Premiers pas avec font-awesome

Exemple de base : utiliser une icône

Le cas d’utilisation simple consiste à faire référence à une seule icône dans sa taille normale : <i class="fa fa-camera-retro"></i> (Voir le résultat dans [ce][1] violon.)

Créez une balise vide (il est recommandé d’utiliser <i> utilisé pour cela) et affectez la classe “fa” et la classe correspondant à l’icône souhaitée (voir la liste des icônes [ici][2]).

[1] : https://jsfiddle.net/oxnwjd3z/ [2] : http://fontawesome.io/icons/

Installer

Différentes approches peuvent être utilisées pour intégrer FontAwesome dans un site Web :

Pour HTML/CSS brut :

  • Téléchargez le zip disponible [ici][1], décompressez et copiez le contenu sur votre site Web. Ensuite, référencez le /css/font-awesome.css dans le head de la page Web comme ceci :

    <link rel="stylesheet" src="/assets/font-awesome/css/ font-awesome.css">
  • Référencez-le dans la “tête” de la page Web à l’aide d’une adresse CDN. Une de ces adresses serait https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css. Pour faire référence à cela, utilisez simplement une balise link mais définissez la source sur l’adresse CDN à la place

Pour les gestionnaires de packages :

La plupart des gestionnaires de packages prennent en charge Font Awesome en tant que package, et voici quelques exemples ci-dessous :

  • NuGet : recherchez et installez simplement “Font-Awesome”, ou exécutez la commande ci-dessous dans la console du package : Install-Package FontAwesome
  • Ruby : exécutez simplement cette commande : gem install font-awesome-rails
  • npm : exécutez simplement cette commande : npm install font-awesome

[1] : https://github.com/FortAwesome/Font-Awesome/archive/master.zip

Utiliser la police géniale

Font Awesome est une bibliothèque extrêmement simple mais puissante à utiliser, avec 634 icônes disponibles en quelques mots.

Comment ça marche? Font Awesome utilise des caractères Unicode stockés dans un répertoire ../fonts pour remplacer tous les éléments i.fa par le caractère Unicode correspondant, affichant ainsi l’icône sous forme de texte.

Comment créer une icône ? Toutes les classes d’icônes doivent être un élément i ou un élément italique, principalement pour les meilleures pratiques, mais améliore également les performances avec Font Awesome. Toutes les icônes ont également la classe “fa” dessus. Cela indique une icône et ne fonctionnera pas sans elle. Après cela, ajoutez simplement l’icône de votre choix, précédée d’un autre “fa-”. Un exemple fini est ci-dessous:

<i class="fa fa-crayon"></i> devient [![fa-crayon][1]][1]

Parce que font awesome fonctionne avec des caractères Unicode, il permet également à toute manipulation de texte de s’y appliquer, comme font-size, color, etc.

[1] : http://i.stack.imgur.com/08OV3.jpg