Cmo implementar los conos vectoriales de Ico...

http://magazine.joomla.org/es/ediciones-anterior...

Issue Marzo 2015 > Desarrollador, Spanish

Cmo implementar los conos

vectoriales de IcoMoon en una
plantilla de Joomla!
Escrito por Csar Vargas-Machuca B.
| Sunday, 01 March 2015 00:00 | Publicado en Marzo 2015

IcoMoon es una librera web que nos brinda muchas colecciones de

conos vectoriales donde podemos elegir y descargar aquellos que
necesitemos para usarlos en nuestros proyectos. Tambin nos brinda la
posibilidad de subir nuestros propios conos en formato SVG y generar
los correspondientes archivos de fuentes tipogrficas. Una de las
caractersticas de Joomla! 3.x es que incorpora ms de un centenar de
conos vectoriales de IcoMoon en la plantilla del panel de administracin
(back-end) y en algunos mdulos que vienen por defecto (front-end).
Debido a que dichos conos vectoriales se utilizan como fuentes
tipogrficas, es posible prescindir del uso de imgenes o sprites, lo que
representa una gran ventaja en el tiempo de carga del sitio. Veamos cmo
podemos implementar los conos vectoriales de IcoMoon en una plantilla
de Joomla!

1 de 17

08/03/15 14:17

Cmo implementar los conos vectoriales de Ico...

http://magazine.joomla.org/es/ediciones-anterior...

Digamos que hemos elegido la plantilla "Protostar" para el front-end de nuestro sitio; por lo tanto,
nuestra web se mostrar asi:

Supongamos ahora que queremos que en el mdulo del Men Principal, a la izquierda de cada

2 de 17

08/03/15 14:17

Cmo implementar los conos vectoriales de Ico...

http://magazine.joomla.org/es/ediciones-anterior...

elemento del men se muestre un cono representativo. Para hacer esto, necesitamos conocer cules
son las clases incluidas en la hoja de estilos de la plantilla "Protostar".
En el archivo templates/protostar/css/template.css los estilos de los conos vectoriales de IcoMoon se
muestran a partir de la lnea 6210. Vemos que la clase .icon-home se encuentra en la lnea 6624 y
corresponde al cono de la clsica casita que se usa con frecuencia para indicar la pgina principal del
men (home).

Entonces, desde el panel de administracin, ingresamos al Gestor de mens para editar el primer elemento del men:
"Inicio".

3 de 17

08/03/15 14:17

Cmo implementar los conos vectoriales de Ico...

http://magazine.joomla.org/es/ediciones-anterior...

En la pestaa Tipo de enlace asignamos el estilo CSS del enlace escribiendo icon-home en la caja de texto.

Luego del cambio, actualizamos nuestro navegador y vemos que aparece el cono de la casita a la
izquierda del primer elemento del men.

4 de 17

08/03/15 14:17

Cmo implementar los conos vectoriales de Ico...

http://magazine.joomla.org/es/ediciones-anterior...

Ahora repetimos el procedimiento para cada uno de los elementos del men restantes.
Al elemento Portafolio le asignamos el estilo icon-joomla para mostrar el cono de Joomla!.
A Blog le asignamos icon-comments para mostrar el cono de la burbuja de comentarios.
A Contacto le asignamos icon-envelope para mostrar el cono del sobre de correo.
Actualizamos el navegador y ahora en el Men Principal se muestra un cono diferente para cada
elemento.

5 de 17

08/03/15 14:17

Cmo implementar los conos vectoriales de Ico...

http://magazine.joomla.org/es/ediciones-anterior...

Eso es todo. Fcil, no?

Sin embargo, qu pasara si ninguno de los 145 conos disponibles en la hoja de estilos es de
nuestro agrado o nuestra plantilla no trae incorporados los conos de IcoMoon o simplemente
necesitamos utilizar otros conos? No hay problema. IcoMoon nos brinda la solucin.
Ingresamos en el sitio oficial de IcoMoon y hacemos clic en el botn rojo IcoMoon App.

6 de 17

08/03/15 14:17

Cmo implementar los conos vectoriales de Ico...

http://magazine.joomla.org/es/ediciones-anterior...

Vemos que, por defecto, se muestran dos colecciones gratuitas: IcoMoon - Free y Linecons. Si
necesitamos agregar conos de otras colecciones, tambin podemos hacerlo.

Elegimos cuatro conos de la coleccin IcoMoon - Free, uno para cada elemento del men principal
de nuestro sitio. Los conos elegidos se muestran con un fondo blanco y un borde amarillo.

7 de 17

08/03/15 14:17

Cmo implementar los conos vectoriales de Ico...

http://magazine.joomla.org/es/ediciones-anterior...

Una vez hecha la eleccin, hacemos clic en el botn Generate Font para generar las fuentes
tipogrficas.

Verificamos los conos que hemos elegido y hacemos clic en el botn Font Download para descargar
el archivo icomoon.zip que contiene las fuentes tipogrficas generadas por la aplicacin y sus

8 de 17

08/03/15 14:17

Cmo implementar los conos vectoriales de Ico...

http://magazine.joomla.org/es/ediciones-anterior...

correspondientes estilos CSS.

Luego de la descarga, descomprimimos el archivo icomoon.zip y verificamos su contenido. Solamente

nos interesa la carpeta fonts y el la hoja de estilos style.css.

Copiamos la carpeta fonts y la pegamos en el directorio de la plantilla "Protostar"

(templates/protostar/).

9 de 17

08/03/15 14:17

Cmo implementar los conos vectoriales de Ico...

http://magazine.joomla.org/es/ediciones-anterior...

Verificamos que dentro de la carpeta fonts haya cuatro archivos que corresponden a las fuentes
tipogrficas: icomoon.eot, icomoon.svg, icomoon.ttf e icomoon.woff.

Ahora nos concentramos en el archivo style.css.

10 de 17

08/03/15 14:17

Cmo implementar los conos vectoriales de Ico...

http://magazine.joomla.org/es/ediciones-anterior...

Copiamos todo el contenido del archivo styles.css al final de la hoja de estilos de la plantilla "Protostar"
(templates/protostar/css/template.css).

Ahora nos concentramos en la hoja de estilos template.css (templates/protostar/css/template.css).

11 de 17

08/03/15 14:17

Cmo implementar los conos vectoriales de Ico...

http://magazine.joomla.org/es/ediciones-anterior...

Como los archivos de la carpeta fonts se encuentra en el directorio template/protostar/fonts tenemos

que cambiar la ruta de las fuentes tipogrficas en el archivo template.css subiendo un nivel en la
estructura de archivos.

Para evitar posibles conflictos con las clases existentes en la plantilla "Protostar", renombramos el
atributo font-family: icomoon por newicomoon.

12 de 17

08/03/15 14:17

Cmo implementar los conos vectoriales de Ico...

http://magazine.joomla.org/es/ediciones-anterior...

Tambin renombramos las clases correspondientes a cada uno de los conos vectoriales.

13 de 17

08/03/15 14:17

Cmo implementar los conos vectoriales de Ico...

http://magazine.joomla.org/es/ediciones-anterior...

Luego de realizar los cambios, vemos que el Men principal de nuestro sitio no ha cambiado. Por
qu? Porque todava no hemos modificado las clases CSS asignadas inicialmente a cada elemento
del men.
En el Gestor de mens, tenemos que realizar los siguientes cambios:
En el elemento de men "Inicio": icon-home por icomoon-home.

14 de 17

08/03/15 14:17

Cmo implementar los conos vectoriales de Ico...

http://magazine.joomla.org/es/ediciones-anterior...

En el elemento de men "Portafolio": icon-joomla por icomoon-joomla.

En el elemento de men "Blog": icon-comments por icomoon-bubbles2.
En el elemento de men "Contacto": icon-envelope por icomoon-envelop.
Luego de los cambios, el Men Principal se ver as:

A primera vista, los nuevos conos se muestran correctamente pero la tipografa de los elementos del
men ha cambiado a una fuente del tipo serif en lugar de conservar la tipografa original de la hoja de
estilos ("Helvetica Neue", Helvetica, Arial, sans-serif).
La solucin es agregar dicha tipografa al atributo font-family: newicomoon.

15 de 17

08/03/15 14:17

Cmo implementar los conos vectoriales de Ico...

http://magazine.joomla.org/es/ediciones-anterior...

Y ahora s, el Men Principal de nuestro sitio ya se muestra tal como queramos.

Como hemos visto, la gran ventaja de implementar IcoMoon en Joomla! es la posibilidad de elegir
solamente aquellos conos que necesitamos en cada proyecto en lugar de descargar extensas
colecciones con conos que no usaremos casi nunca.

16 de 17

08/03/15 14:17

Cmo implementar los conos vectoriales de Ico...

http://magazine.joomla.org/es/ediciones-anterior...

Hasta la prxima. Saludos desde Lima, Per. Abur!

Visto 176 veces
Etiquetado como Desarrollador, Spanish

Csar Vargas-Machuca B.
Freelance web designer. I am focused on responsive web design, SEO and Joomla!
Frequent reader. Passionate about good music. Amateur chef. Friend of animals.
Overly punctual. I hate spam. Single yesterday and today. Peruvian, always!
Diseador web independiente. Diseo websites en Joomla!, adaptables al entorno del usuario y
optimizados para los motores de bsqueda.
Lector frecuente. Apasionado por la buena msica. Cocinero aficionado. Amigo de los animales.
Excesivamente puntual. Detesto el spam. Soltero ayer y hoy. Peruano, siempre!

Twittear

Like Be the first of your friends to like

this.

+2

Comentarios (0)

Aadir nuevo

No hay comentarios todava.

back to top

17 de 17

08/03/15 14:17