Artículo original: How to Add Font Awesome Icons to Your Buttons
Font Awesome es una librería de iconos. Estos iconos pueden ser iconos vectoriales almacenados en un tipo de archivo .svg o pueden ser fuentes web.
Estos iconos son tratados como fuentes. Puedes especificar su tamaño usando píxeles, y ellos van a asumir su tamaño de los elementos HTML de su padre.
Uso básico
Para añadir Font Awesome a tu aplicación o página, simplemente añade el siguiente código al elemento <head> encima de tu HTML:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">El elemento i originalmente se usaba para hacer que otros elementos estén en cursiva, pero ahora es normalmente usado para iconos. Puedes añadir las clases de Font Awesome al elemento i para convertirlo en un icono, por ejemplo:
<i class="fas fa-info-circle"></i>Nota: los elementos span también son aceptables para usar con iconos.
Así es como añades un icono:
<i class="fas fa-thumbs-up"></i>Esto crearía un icono de un pulgar arriba:
Y así es como insertarías ese icono dentro de un botón:
<button>
<i class="fas fa-thumbs-up"></i> Like
</button>
Hay dos partes para usar un icono, el prefijo del estilo y el nombre del icono. En el ejemplo de arriba, el prefijo del estilo y el nombre del icono son fas y fa-thumbs-up, respectivamente.
Font Awesome nos ofrece los siguientes prefijos del estilo:
| Estilo | Prefijo de estilo | Plan |
|---|---|---|
| Solido | fas | Gratuito |
| Regular | far | Pro |
| Ligero | fal | Pro |
| Duotono | fad | Pro |
| Marcas | fab | Gratuito |
Los iconos de marcas a menudo están enviados por las propias compañías, y son bastante útiles para hacer cosas como botones para autentificación o pagos sociales. En estos icocos se incluye Twitter, Facebook, Spotify, Apple, e incluso freeCodeCamp:
<i class="fab fa-free-code-camp"></i>
Mientras solo tienes acceso a los iconos sólidos y de marcas con el plan gratuito, todavía hay muchas formas de estilizarlos.
Estilizar iconos de Font Awesome
Para aplicaciones simples, puedes usar estilos en línea:
<span style="font-size: 3em; color: Tomato;">
<i class="fas fa-thumbs-up"></i>
</span>
Para cambiar el tamaño de los iconos también puedes usar las palabras clave incorporadas de Font Awesome:
<i class="fas fa-thumbs-up fa-xs"></i>
<i class="fas fa-thumbs-up fa-sm"></i>
<i class="fas fa-thumbs-up fa-lg"></i>
<i class="fas fa-thumbs-up fa-2x"></i>
<i class="fas fa-thumbs-up fa-3x"></i>
<i class="fas fa-thumbs-up fa-5x"></i>
<i class="fas fa-thumbs-up fa-7x"></i>
<i class="fas fa-thumbs-up fa-10x"></i>
Algo importante de recordar es que los iconos FA adquieren el tamaño de la fuente (font-size) del contenedor de su padre. Esto significa que los iconos se escalan con cualquier texto que podría ser usado con ellos, lo que mantiene el diseño consistente.
Por ejemplo, piensa que quieres crear varios botones. El tamaño por defecto de los botones es bastante pequeño, así que escribes un poco de CSS para incrementar el tamaño de estos, junto con el texto y los iconos que contienen:
<button>
<i class="fas fa-thumbs-up"></i> Like
</button>
<button>
<i class="fas fa-thumbs-down"></i> Dislike
</button>
<button>
<i class="fas fa-share"></i> Share
</button>button {
font-size: 1.5em;
margin: 5px;
}
También puedes ajustar el tamaño de un icono directamente seleccionando el icono y ajustando su font-size.
Font Awesome es, bueno, ¡maravilloso! Como la herramienta más popular para iconos, es fácil de incluir y usar en todos tus proyectos. Ahora ve a ponerle un icono a todas las cosas.