Joomla_ImplementarIconos

Issue Marzo 2015 > Desarrollador, Spanish

Cmo implementar los conosvectoriales de IcoMoon en unaplantilla 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!

Cmo implementar los conos vectoriales de Ico... http://magazine.joomla.org/es/ediciones-anterior...

1 de 17 08/03/15 14:17

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

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

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

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

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

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

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

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

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

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

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

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


13 de 17 08/03/15 14:17

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

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

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

Visto 176 veces

TwittearTwittear 3

Comentarios (0) Aadir nuevo

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

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!

+2

No hay comentarios todava.

back to top

Be the first of your friends to like

this.

Like

Like


17 de 17 08/03/15 14:17

Joomla_ImplementarIconos

Documents

Transcript of Joomla_ImplementarIconos

acrostics

PROFESORADO

Report

Libro1

gidoi teknikoa

3-Sentsoreak

Logos

especificaciones, concreto y acero

problemes unitats de mesura

VALORIZACION OCTUBRE VICTOR ROMERO

galdetegia

captura imagen c#

Diccionario de lunfardo

PRECIOSCHACO

Book1

Kar Español

EXPLOCION CE INSUMO HOSPITAL

DÍA DE LA ANUNCIACIÓN

CARGUE PUCC

Metodos y Tecnicas de Investigacion Social I-2007