¿Cómo insertar “FontAwesome Icons” en tu web?

FontAwesome

Hace poco me econtré con la pregunta de ¿Cómo usar los iconos como FontAwesome Icons? Y en pensé entonces en crear una entrada explicando como se hace, es sencillo.

Primero que nada ¿Qué es FontAwesome Icons? Bueno no es más que un tipo de fuente que en vez de ser letras, son íconos. Éstos íconos son los que se usan en las páginas web para no usar íconos de tipo imagen para así hacer más rápido la carga de imágenes.

La primera vez que vi este tipo de íconos fue con el framework de Bootstrap, con su fuenteGlyphicons, aunque no digo que hayan sido los primeros, no se.

Lo cierto es que existen muchas fuentes similares para hacerle uso de íconos, yo usoGlyphicons, FontAwesome Icons o Elusive Icons. Glyphicons viene con Bootstrap. En éste post explicaré como insertar FontAwesome Icons que será de la misma forma paraElusive Icons.

Vamos a la página web del producto

Lo primero será dirigirnos al sitio web del producto, en éste caso será el de FontAwesome, para ello, buscamos en google: FontAwesome Icons y hacemos click en el primer enlace.

FontAwesome WebSite

Descargamos los archivos

Una vez estemos en la página, le damos click a ‘Home’, y luego a ‘Download’ para obtener los archivos comprimidos. Luego, vamos a descomprimir la el archivo .rar, y copiaremos las carpetas en nuestra carpeta proyecto (Donde estemos trabajando nuestra web). Las carpetas más importantes son css, y fonts. Las otras no son necesarias.

Install FontAwesome

Enlazamos los archivos FontAwesome con nuestro proyecto

Cuando tengamos los archivos ya en la carpeta del proyecto, debemos enlazarlos en el archivo HTML, para ello revisamos la documentación en el sitio web haciendo click en ‘Get Started’. Y leemos donde dice EASY: Default CSS. Tendremos algo como ésto.

<link rel="stylesheet" href="css/font-awesome.min.css">

Depende de como tengas las carpetas en tu proyecto, lo acomodas en el href.

Veamos un ejemplo de uso

Ya teniendo todo “instalado” por decir así, veamos como usarlo. Para esto, vemos un ejemplo haciendo click en ‘Examples’ en el sitio web. Tendremos algo como ésto.

<i class="fa fa-camera-retro"></i> fa-camera-retro

¡Quiero más íconos!

Bien, ahora es hora de tomarnos un tiempo y ver la gran cantidad de íconos que nos ofrece FontAwesome Icons, solo debemos dar click en Icons

Y eso es todo, ¿Ves que es fácil? Para Elusive Icons Es el mismo proceso, solo que el sitio web es otro. ¿Conoces alguna otra fuente de íconos? Si es así, compártela con nosotros. Si tienes alguna duda, deja cun comentario. 😀

Deja un comentario

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