Descargar Iconos de Font Awesome para usar sin internet

En este post voy a explicar cómo descargar y configurar los iconos de la librería Font Awesome para alojarlos localmente o en nuestros propios servidores.

Alojar estos iconos de manera offline es importante cuando creamos aplicaciones web que no van a tener acceso a internet, es decir, que serán aplicaciones fuera de línea.

También es necesario saber cómo configurar el directorio de carpetas, fuentes y CSS dentro de nuestro proyecto, de esta manera podemos tener los iconos de Font Awesome en nuestro propio servidor o en localhost, sin depender del internet.

Descargar Font Awesome 5.7

Comenzamos yendo a la página oficial de esta maravillosa librería, la cual se encuentra aquí. Una vez que estemos dentro de la página, hacemos click en el botón que dice Font Awesome Free for the Web.

Descargar Font Awesome versión 5.7.2

Descargar Font Awesome versión 5.7.2

Eso descargará un zip. Vamos a extraerlo en la ruta pública de nuestro proyecto web, es decir, a un lugar que sea accesible desde el navegador.

Elegir CSS

Todas las carpetas tienen su uso. Por ejemplo, las de scss o less sirven para compilar a CSS, el de JS para renderizar con JavaScript, etcétera.

Como en este caso lo vamos a hacer con CSS, necesitamos únicamente la carpeta de CSS (también la de webfonts pero eso es otra historia) y dentro de ella vamos a elegir un archivo:

Si queremos todos los iconos en todas sus versiones, elegimos all.css. En caso de que no, podemos elegir entre brands.css o solid.css

Por cierto, para producción siempre selecciona los que terminen con min.css pues están minificados.

Copiar webfonts

Sin importar lo que hayas elegido en el CSS, la carpeta webfonts debe estar un directorio arriba de donde está el CSS. Aquí tengo un ejemplo:

Estructura de CSS y Fuentes de Font Awesome

Estructura de CSS y Fuentes de Font Awesome

Me parece que con la imagen se entiende todo, pero en resumen hay que cargar el CSS en el head, y sin importar la ubicación del archivo, ponemos la carpeta de webfonts un directorio arriba de donde lo hayamos puesto el archivo CSS.

En el ejemplo, el css está dentro de un directorio llamado CSS. Lo cargo desde el index.html y listo.

Ejemplo de uso de Font Awesome

Cuando ya lo tienes, puedes usar cualquier icono gratuito (o pro en caso de que lo compres). Para ello simplemente crea un elemento i y ponle la clase fa junto con la clase del icono.

La lista completa de iconos la encuentras aquí. De todos modos, cuando seleccionas un icono la página te indica cómo usarlo.

Aquí dejo el código de ejemplo de todas maneras:

La salida es la de la imagen:

Demostración de uso de Font Awesome offline

Demostración de uso de Font Awesome offline

Recuerda que puedes integrar Font Awesome con tu framework favorito como Bootstrap, espero escribir una entrada para integrarlo, aunque no es muy difícil.

Conclusión

Así de simple pudimos integrar Font Awesome en nuestro proyecto web, haciendo que sea totalmente offline o fuera de línea.

Ahora ya estamos listos para alojar las fuentes por nosotros mismos o hacer una aplicación web totalmente independiente de internet.

En mi blog puedes aprender más sobre CSS, HTML o la web.

Estoy interesado en trabajar contigo de manera remota para llevar tu idea a la realidad, formar parte de tu equipo de desarrolladores, ayudarte con tu tarea, dar asesorías y todo lo relacionado con tecnología y programación. Contáctame para más información
No te vayas sin seguirme en Twitter, Facebook y GitHub
Si tienes dudas déjalas en un comentario, pero asegúrate de seguirme antes como agradecimiento (no te cuesta nada y me ayudas mucho)


parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB. Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron. Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scripts La plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C. Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

Deja un comentario

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: