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 Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Email this to someone
email

Sobre María

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

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

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

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

Deja un comentario

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

*