Plugin Optimización de Imágenes Gratuito para WordPress
Domingo, 05 Mayo 2013 20:53

Icomoon en Joomla 3

Escrito por  Jhon Marreros Guzman
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 y PrestaShop

WordPress    PrestaShop


Jhon Marreros Guzman

Jhon Marreros Guzman

Google+


Plugin Optimización de Imágenes Gratuito para WordPress