Hoy hablaré de una solución increíblemente sencilla y gratuita para añadir iconos en nuestra web o blog, bien en títulos, menús, listas o donde queramos, sin necesidad de usar imágenes ni JavaScript. Se trata de Font Awesome, una lista de más de 400 iconos gratuitos que, al ser tratados como una fuente normal de letra, son fácilmente escalables y editables mediante CSS. Además, tardan menos tiempo en cargar que si usáramos imágenes.
Cómo empezar a usar los iconos
Hay varias maneras de implementarlos, todas bien sencillas. Aquí veremos una de ellas.
1. Descargar el kit de CSS y Font
2. Extraer los archivos .css en nuestra carpeta CSS y los archivos de fuente en nuestra carpeta Fonts.
3. Copiar y pegar esta línea de código dentro de la etiqueta <head> de nuestro html, poniendo la ruta correcta al archivo .css que se indica.
<link rel=”stylesheet” href=”tucarpeta/css/font-awesome.min.css“>
4. Ver todos los ejemplos que ofrece Font Awesome
¿Qué posibilidades ofrece?
Como hemos dicho, se trata de una fuente más, con lo que podemos jugar con todas las posibilidades que ofrece una tipografía. Voy a citar algunas de ellas.
Tamaño
Añadiendo fa-lg se agranda en un 33%, y con fa-2x, fa-3x, fa-4x, o fa-5x multiplicamos su tamaño en esa proporción.
fa-2x
fa-3x
fa-4x
fa-5x
<i class=”fa fa-camera-retro fa-lg“></i> fa
<i class=”fa fa-camera-retro fa-2x“></i> fa-2x
<i class=”fa fa-camera-retro fa-3x“></i> fa-3x
<i class=”fa fa-camera-retro fa-4x“></i> fa-4x
<i class=”fa fa-camera-retro fa-5x“></i> fa-5x
Listas
- Ejemplos
- de iconos
- usados
- en listas
<li><i class=”fa-li fa fa-home“></i>Ejemplos</li>
<li><i class=”fa-li fa fa-pencil“></i>de iconos</li>
<li><i class=”fa-li fa fa-check“></i>usados</li>
<li><i class=”fa-li fa fa-heart“></i>en listas</li>
Iconos giratorios
Simplemente, añadiendo “fa-spin” a cualquier icono, este girará.
<i class=”fa fa-circle-o-notch fa-spin“></i>
<i class=”fa fa-refresh fa-spin“></i>
<i class=”fa fa-cog fa-spin“></i>
Iconos girados
fa-rotación-90
fa-rotación-180
fa-rotación-270
fa-espejo-horizontal
fa-espejo-vertical
<i class=”fa fa-shield fa-rotate-90“></i> fa-rotación-90
<i class=”fa fa-shield fa-rotate-180“></i> fa-rotación-180
<i class=”fa fa-shield fa-rotate-270“></i> fa-rotación-270
<i class=”fa fa-shield fa-flip-horizontal“></i> fa-espejo-horizontal
<i class=”fa fa-shield fa-flip-vertical“></i> fa-espejo-vertical
Como vemos, son múltiples las opciones que ofrecen los iconos gratis de Font Awesome y todas muy fáciles de utilizar, así que creo que todo son ventajas y no me extraña que se hayan puesto tan de moda en el diseño web actual.
Hola María, gracias por el artículo, me gustaría saber si estos iconos son indexables por google, porque he probado a poner muchos en los títulos de mi web y luego al buscar la url en google no aparecen, gracias.
¡Hola! Gracias por tu comentario. Sí que son indexables por Google ya que los trata como texto. Pero si usas WordPress no te los admite en títulos y meta descripciones, ya que son en html y no los reconoce. ¡Un saludo!
Genial, muchas gracias! la verdad es que lo está muy bien explicado. Estoy comenzado con mi primer proyecto “medianamente” pro, para el instituto, y la verdad es que ando con un miedo terrible! , pero sitios como éste me ayudan mucho. Saludos!
Gracias por tu tema, muy bueno, me ha ayudado, pero quisiera rpeguntarte si tienes una lista o forma de como poder ver todos los iconos posibles y como poder llamarlos con su clase correspondiente. Por favor responderme por el correo si es posible.
buen día primeramente gracias por tu gran labor y bueno me gustaría saber como configuroen esta parte:
facebook
twitter
github
google plus
Toggle navigation
Página principal
<!—->
ya que no se como configurar para que hagan su función que me parece que es el compartir la pagina en la cual estaría el usuario en ese momento.
Cabe recalcar que es de una plantilla para blogger que descargue.
Buenas noches. Me podrías confirmar si son totalmente gratis o si hay que hacer referencia de algún tipo a la licencia o fabricante o lago por el estilo? Desde ya muchas gracias.