Primeros pasos con font-awesome

Ejemplo básico: usar un icono #

El caso de uso simple es referirse a un solo ícono en su tamaño normal: <i class="fa fa-camera-retro"></i> (Ver resultado en este violín.)

Cree una etiqueta vacía (se recomienda usar <i> para eso) y asigne la clase “fa” y la clase correspondiente al icono deseado (ver lista de iconos aquí).

Configuración #

Se pueden utilizar diferentes enfoques para integrar FontAwesome en un sitio web:

Para HTML/CSS simple:

• Descargue el zip disponible aquí, descomprímalo y copie el contenido en su sitio web. Luego haga referencia a /css/font-awesome.css en la página web head así:
  
  <link rel="stylesheet" src="/assets/font-awesome/css/ fuente-impresionante.css">
• Referenciarlo en la página web head usando una dirección CDN. Una de esas direcciones sería https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css. Para hacer referencia a esto, solo use una etiqueta enlace pero configure la fuente en la dirección CDN en su lugar

Para administradores de paquetes:

La mayoría de los administradores de paquetes admiten Font Awesome como un paquete, y hay algunos ejemplos a continuación:

• NuGet: simplemente busque e instale Font-Awesome, o ejecute el siguiente comando en la consola del paquete: Instalar paquete FontAwesome
• Ruby: solo ejecuta este comando: gem install font-awesome-rails
• npm: simplemente ejecute este comando: npm install font-awesome

Uso de fuentes impresionantes #

Font Awesome es una biblioteca extremadamente simple pero poderosa de usar, con 634 íconos disponibles en solo unas pocas palabras.

¿Como funciona? Font Awesome usa caracteres Unicode almacenados en un directorio ../fonts para cambiar cualquier elemento i.fa al carácter Unicode respectivo, mostrando el ícono como texto.

¿Cómo creo un icono? Todas las clases de íconos deben ser un elemento i o un elemento en cursiva, principalmente para las mejores prácticas, pero también para mejorar el rendimiento con Font Awesome. Todos los íconos también tienen la clase fa en ellos. Esto denota un ícono y no funcionará sin él. Después de eso, simplemente agregue el ícono que desee, con el prefijo fa-. A continuación se muestra un ejemplo terminado:

<i class="fa fa-pencil"></i> se convierte en

Debido a que Font Awesome funciona con caracteres Unicode, también permite que se aplique cualquier manipulación de texto, como “tamaño de fuente”, “color” y más.