Iconos gratis de Font Awesome

Cómo usar los iconos gratis de Font Awesome en tu web

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
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-spinner fa-spin“></i>
<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

normal
fa-rotación-90
fa-rotación-180
fa-rotación-270
fa-espejo-horizontal
fa-espejo-vertical
<i class=”fa fa-shield“></i> normal
<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.

Comparte si te ha gustadoShare on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

Sobre María

Lingüista de vocación, ahora también apasionada de las páginas webs, blogs y marketing de contenidos.

4 thoughts on “Cómo usar los iconos gratis de Font Awesome en tu web

  1. 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.

    1. ¡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!

  2. 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!

  3. 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*