Probablemente haz visto una gran cantidad de blogs que incluyen al lado de cada elemento del menú un icono. O tal vez has visto que colocan los botones para seguimiento en redes sociales.
Puede que te preguntes ¿Cómo lo hacen? Hoy día las mayorías de las plantillas para WordPress y Blogger incluyen una fuente de iconos llamada Font Awesome.
Pero ¿qué pasa si la tuya no la incluye o si no sabes incluir los iconos? Este tutorial te lo explica.
Te puede interesar:
Tutorial: Cómo configurar un dominio .com.ve en Blogger
Los 15 mejores bancos de imágenes de la web
Los errores que cometí en el primer año del blog y que debes evitar
Contenido
¿Qué es Font Awesome?
Font Awesome es una fuente compuesta por iconos vectoriales escalables que se pueden personalizar al instante aplicando reglas CSS: tamaño, color, sombra paralela y otras modificaciones.
¿Por qué usar Font Awesome?
- En un solo paquete incluye unos 675 iconos de diversos temas y continuamente se están incluyendo nuevos.
- Completamente libre para uso comercial, proyectos de código abierto y casi cualquier cosa que desees.
- No requiere JavaScript.
- Al ser gráficos vectoriales escalables los iconos se ven bien sin importar el tamaño. Nunca se distorsionan.
- Los iconos se ven perfectos en pantallas de alta resolución.
¿Cómo usar Font Awesome en Blogger?
Incluir los iconos de font awesome en un blog de blogger es muy sencillo y no tiene nada de complejidad. Aquí veremos el método más sencillo de hacerlo.
1. Vamos a nuestro escritorio de Blogger, específicamente a la sección Temas y elegimos Editar HTML.
2. Una vez veamos nuestro código debemos buscar (usa ctrl+f) la etiqueta </head> y antes de esta línea copiamos lo siguiente:
En este caso, 4.7.0 se refiere a la versión de la fuente. Si quieres saber cual es la más reciente ve a la página oficial.
Ya hemos agregado font awesome a nuestro blog. Ahora comencemos a usarlo. Veamos dos de los usos más comunes que se dan a los iconos en un blog.
Incluir iconos de las redes sociales
Supongamos que quieres incluir los iconos de las redes sociales para facilitar que tus usuarios te encuentren y te sigan.
Quizás deseas algo parecido a la imagen:
Para hacerlo, lo primero que debes hacer es ubicar el código de las redes (todos están en Brands icons), en font-awesome al hacer clic sobre el icono nos aparece el código que debemos copiar.
Tomemos como ejemplo el icono de Twitter
Una vez tengas todos los códigos debemos añadir los iconos a nuestro blog, supongamos que queremos que aparezcan en la sidebar. Vamos a Diseño, agregar un nuevo gadget (donde queramos que aparezca)
Ahora copiamos el siguiente código:
Como resultado veremos los iconos que dirigen a nuestros perfiles en la posición que elegimos, pero los veremos de esta manera (un poco pequeños):
Para mejorar su apariencia recurrimos a CSS, en Tema -> Personalizar-> Avanzado, copiamos el siguiente código
El resultado:
Recuerda colocar el color y tamaño que quieras, y si tienes un poco de conocimiento en CSS puedes personalizar a tu gusto los iconos.
Colocar iconos en nuestro menú
Colocar los iconos en el menú es mucho más sencillo todavía, solo debemos buscar el código del icono que deseemos.
Una vez que lo tengamos, vamos a Tema -> Editar HTML, buscamos el código del menú y en la línea de cada elemento del mismo agregamos <i class=’URL-DEL-ICONO’/>
En mi caso sería
Ya hemos aprendido a incluir Font Awesome en nuestro blog si nuestra plantilla no la trae, como ves en un método muy sencillo y rápido que no requiere tener muchos conocimientos de HTML y CSS.
¿Qué te ha parecido el tutorial? ¿Ya usas Font Awesome en tu blog?