Font Awesome es una cómoda biblioteca de iconos. Estos iconos pueden ser gráficos vectoriales almacenados en .svgformato de archivo o fuentes web.
Estos iconos se tratan como fuentes. Puede especificar su tamaño utilizando píxeles, y asumirán el tamaño de fuente de sus elementos HTML principales.
Uso básico
Para incluir Font Awesome en su aplicación o página, simplemente agregue el siguiente código al elemento en la parte superior de su HTML:
El ielemento se usó originalmente para hacer otros elementos en cursiva, pero ahora se usa comúnmente para iconos. Puede agregar las clases Font Awesome al ielemento para convertirlo en un ícono, por ejemplo:
Tenga en cuenta que el spanelemento también es aceptable para su uso con iconos.
Así es como agrega un ícono:
Esto producirá un simple icono de pulgar hacia arriba:
Y así es como insertaría ese icono en un botón:
Like 
Observe que hay dos partes para usar un icono, el prefijo de estilo y el nombre del icono . En el ejemplo anterior, el prefijo de estilo y el nombre del icono son fasy fa-thumbs-up, respectivamente.
Font Awesome ofrece los siguientes prefijos de estilo:
| Estilo | Prefijo de estilo | Tipo de plan |
|---|---|---|
| Sólido | fas |
Gratis |
| Regular | far |
Pro |
| Ligero | fal |
Pro |
| Duotono | fad |
Pro |
| Marcas | fab |
Gratis |
Los íconos de marca a menudo los envía la propia empresa y son útiles para crear elementos como botones para autenticación social o pago. Estos íconos incluyen Twitter, Facebook, Spotify, Apple e incluso freeCodeCamp:
Si bien solo tendrá acceso a íconos sólidos y de marca en el plan gratuito, todavía hay muchas formas de diseñarlos.
Estilo de iconos de Font Awesome
Para aplicaciones simples, puede usar estilos en línea:
Para dimensionar, también puede usar las palabras clave integradas de Font Awesome:
Una cosa importante a recordar es que los íconos FA heredan el font-sizedel contenedor principal. Esto significa que los íconos se escalan con cualquier texto que pueda usarse con ellos, lo que mantiene el diseño consistente.
Por ejemplo, digamos que desea crear varios botones. El tamaño predeterminado de los botones es bastante pequeño, por lo que escribe algo de CSS para aumentar el tamaño de los botones, junto con el texto y los iconos dentro de ellos:
Like Dislike Share button { font-size: 1.5em; margin: 5px; }
También puede ajustar el tamaño de un icono directamente apuntando al icono y ajustando su font-size.
Font Awesome es, bueno, ¡increíble! Como los kits de herramientas de iconos más populares, es fácil de incluir y usar en todos sus proyectos. Ahora ve al ícono de todas las cosas.
Más información
- Documentos de Font Awesome
- Todos los iconos de Font Awesome disponibles