Estructura de CSS y Fuentes de Font Awesome
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.
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.
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.
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.
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:
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.
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:
Recuerda que puedes integrar Font Awesome con tu framework favorito como Bootstrap, espero escribir una entrada para integrarlo, aunque no es muy difícil.
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.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.
