Clicky

Crea iconos sociales independientemente de la resolución

iconos de fuentes para Joomla

Guía paso a paso para hacerlo en un sitio web Joomla!

La elección de los iconos sociales adecuados para tu sitio web es más importante de lo que puedas darte cuenta; estos pocos simples iconos, aparentemente inocuos, sirven como puerta de entrada a un mundo más amplio a través del cual tu sitio puede llegar potencialmente a millones de personas.

Los ames o los detestes, los medios sociales son un componente crítico de tu presencia en línea, seas un escritor solitario que mantiene un blog o representes a una empresa internacional. Tu imagen de marca, la identidad en línea e incluso el SEO pueden ser afectados por ellos, por lo que tendrás que asegurarte que tus iconos sean elegantes, limpios y, lo más importante, claros.

En la mayoría de las plantillas de Joomla verás que hay una zona dedicada a los iconos sociales y similares; generalmente están centrados en los portales sociales más populares como Facebook, Twitter y Google+. Sin embargo, aunque esto puede funcionar bien para muchos sitios, diferentes países tienen sus propias redes sociales y para conseguir más popularidad se necesitarían iconos totalmente diferentes. Afortunadamente, hay una manera muy fácil de extender esta funcionalidad para incluir iconos adicionales.

Ya hemos hablado en otro artículo de Perfect Icons, una pequeña pero muy útil herramienta en línea que permite generar código HTML para una amplia gama de iconos y definir los vínculos (enlaces) que deseas para cada icono con tan sólo unos clics. ¿Suena bien? Por supuesto que sí! Lo que es más, se puede personalizar el diseño de los iconos con parámetros adicionales, como el tamaño, el espaciado, el radio o el color, y elegir si deseas agregar un efecto de flotar entre 4 opciones diferentes.

Una de las mayores ventajas de Perfect Icons es la increíble variedad de iconos disponibles - se pueden generar hasta 56 iconos sociales, relacionados con los medios y unos cuantos más de elementos de uso general como el correo electrónico o RSS. La lista de iconos contiene casi todos los sitio web populares que tienen un perfil público que vale la pena compartir, como Facebook, Twitter, Google+, Pinterest, Foursquare, Skype, Spotify, YouTube, Instagram, WordPress, Blogger, Tumblr, Joomla, regate, GitHub y muchos más. Es posible especificar el mismo color para todos los iconos o simplemente mantener el fondo original predeterminado para el icono; perfecto si tienes un estilo de color en tu sitio que no deseas interrumpir. Con el parámetro de radio puedes generar iconos redondos o cuadrados para combinar con el diseño de tu sitio.

Cómo agregar los iconos generados a tu sitio web Joomla

El primer paso es visitar la página web de Perfect Icons y tendrás que elegir entre su interesante gama de iconos. Especificar las direcciones URL, colores, efectos y otros elementos. Una vez hecho esto, deberías tener algo como esto:

 Perfect Ocons - elegir estilo

Entonces tendremos que descargar la fuente preparada especialmente que incluirá nuestros iconos; basta con hacer clic en el botón socicon.zip en la columna de la derecha. Después de finalizada la descarga descomprimiremos el paquete y copiaremos todos los archivos de dentro (a través de FTP o el administrador de archivos del servidor) tales como socion.eot, socicon.svg, etc.,  al directorio fonts de instalación de la plantilla. La ruta correcta por lo general será:

root/templates/nombre_template/fonts

directorio fonts

Ahora, es el momento de copiar la parte del código (por fin!) que podemos encontrar bajo el botón de descarga. Este código CSS se debe copiar en el archivo override.css que se puede encontrar en el directorio root/templates/nombre_template/css/ . Después de haber hecho esto, asegúrate de habilitar la opción override.css en la pestaña de Configuración avanzada de tu plantilla desde el gestor de plantillas. IMPORTANTE: En el código copiado reemplaza todas las instancias de:

PATH_TO

a

root/templates/nombre_template/fonts

ruta en la que hemos puesto nuestras fuentes.

archivo override.css

Después de estos 3 pasos nuestra fuente estará lista para usarse y todo lo que tenemos que hacer es publicar nuestros iconos en algún lugar para ver cómo se ven. Preferimos utilizar para esto el módulo HTML personalizado de Joomla; copia el código de la etapa 3 de la guía del sitio web de Perfect Iconos en el editor de contenidos. Eso es todo!

iconos con Perfect IconsSi no puedes ver el contenido del módulo HTML personalizado después de "Guardar" lo más probable sea debido a que tu editor limpia el código HTML (o se está haciendo un lío con él!). Para solucionarlo se debe deshabilitar el filtrado del editor desde la Configuración global de Joomla en la pestaña Filtros de texto (Veremos esto con más detenimiento en otro artículo).

Joomla filtros de texto

Jesus_Caceres