Estructura de CSS y Fuentes de Font Awesome

Configuración e instalación de Iconos de Font Awesome 5.7 para uso offline

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:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demostrar uso de Font Awesome</title>
    <link rel="stylesheet" href="css/all.min.css">
</head>

<body>
    <h1>
        Demostrar uso de font awesome
        <small>by parzibyte</small>
    </h1>
    Editar: <i class="fa fa-edit"></i>
    <br>
    Eliminar: <i class="fa fa-trash"></i>
    <br>
    Agregar: <i class="fa fa-plus-circle"></i>
    <br>
    Descargar: <i class="fa fa-download"></i>
    <br>
    Descargar gigante: <i style="font-size: 10rem;" class="fa fa-download"></i>
    <br>
    Eliminar rojo: <i style="color: red;" class="fa fa-download"></i>
</body>

</html>

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 aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

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