font-awesome Tutorial
Comenzando con fuente impresionante

Observaciones

Preparar

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

Para HTML / CSS plano:

• Descargue el zip disponible aquí , descomprima y copie los contenidos a su sitio web. Luego haga referencia a /css/font-awesome.css en el head la página web de la siguiente manera:
  
  <link rel="stylesheet" src="/assets/font-awesome/css/font-awesome.css">
• Referenciarlo en el head la página web usando una dirección CDN. Una de estas 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 de link pero establezca la fuente en la dirección CDN en su lugar

Para los gestores 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: Install-Package FontAwesome
• Ruby: simplemente ejecuta este comando: gem install font-awesome-rails
• npm: simplemente ejecuta este comando: npm install font-awesome

Ejemplo básico: usando un icono

El caso de uso simple es referirse a un solo icono 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 (vea la lista de iconos aquí ).

Usando Font Awesome

Font Awesome es una biblioteca extremadamente simple pero potente de usar, con 634 iconos disponibles en pocas palabras.

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

¿Cómo creo un icono? Todas las clases de iconos tienen que ser un elemento i , o un italic element , principalmente para las mejores prácticas, pero también mejoran el rendimiento con Font Awesome. Todos los iconos también tienen la clase fa en ellos. Esto denota un icono y no funcionará sin él . Después de eso, simplemente agregue el icono que desee, con el prefijo de otro fa- . Un ejemplo completo está abajo:

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

Debido a que la impresionante fuente funciona con caracteres Unicode, también permite que cualquier manipulación de texto se aplique a ella, como font-size , el color y más.