¿Cómo ayudamos a nuestros Clientes?     Aquí tienes 4.876 maneras »

Domingo, 05 Mayo 2013 20:53

Icomoon en Joomla 3

Escrito por 
CMS:  Joomla! |  Versión:  3.x |  Nivel de dificultad:  Medio |  Tiempo estimado de lectura:  10 minutos


jooml3_icomoonJoomla 3 incluye el uso de herramientas para desarrolladores, entre las que destacan , bootstrap, icomoon y less.

En este artículo analizaremos cómo utilizar los iconos de icomoon en Joomla 3, haremos uso de los iconos en un artículo a través del editor JCE, pero también haremos una modificación a la plantilla protostar para usar los iconos como parte de los títulos de los módulos

 

 

Generalidades

Icomoon ofrece íconos para utilizarlos en nuestros sitios web, podemos hacer uso de estos iconos a través de los diferentes packs que ofrece, sin embargo Joomla 3 ya trae integrado los íconos que ofrece Icomoon a través de archivos fonts (archivos de tipo de letra)

icomoon

Icomoon y Joomla

Podemos hacer uso de Icomoon en la plantilla protostar, que es una de las plantillas que tiene por defecto Joomla 3, si accedemos al archivo  : /templates/protostar/css/template.css , veremos que se definen clases para hacer uso de los íconos, clases como icon-user , icon-locked , etc.

 

Para hacer uso de estas clases debemos utilizar la siguiente sintaxis

<span class="icon-class"></span>

 Reemplazando icon-class por la clase que deseamos , por ejemplo icon-locked, luego esto lo podemos utilizar en algún artículo o módulo personalizado html, debemos colocar estas etiquetas en vista de código del editor.

 

Modificando la plantilla protostar

Una aplicación práctica es que los títulos de los módulos tenga un ícono, y que para indicar que ícono mostrar hacerlo a través de la configuración del módulo; ingresar la clase a usar desde la configuración del módulo , en las opciones avanzadas, por ejemplo icon-user, tal como se muestra en la siguiente imagen

icoencabezadoconfiguracion

 

Luego necesitamos modificar el archivo /templates/protostar/html/modules.php , en la función que hace referencia al stylel well: modChrome_well, línea 44 aproximadamente, agregamos las etiquetas span y la referencia a la variable definida en la pantalla de configuración anterior.

echo "<h3 class=\"page-header\"><span class='".$params->get('header_class')."'></span> ". $module->title . "</h3>";

Con esto obtendremos un resultado similar a : 

icoencabezadomodulo

 

En el siguiente video se explica de manera práctica cada uno de los puntos explicados anteriormente.

 


¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop