Font Awesome c’est quoi ?

Michael

il y a 4 ans

Font Awesome est une solution populaire permettant d’afficher des icônes sur votre site, SAAS, app mobile. Nous allons voir comment l’utiliser simplement.

Font Awesome compte plus de 7000 icônes et continue d’ajouter des icônes populaires.

Comment include font awesome ?

1er Etape :
Aller sur la page suivante : https://fontawesome.com/start
Indiquer votre email, puis validé (Send Kit Code).

2ème Etape :
Créer un compte.
Connectez-vous.

3ème Etape :
Créer un « New Kit ».
Vous allez à présent disposer d’un exemple de code pour intégrer Font Awesome.
La balise script est à ajouter avec vos autres appels JS.
Dans l’exemple qu’il donne, le script est placé entre les balises « head ».

4ème Etape :
Afficher un icône.
Pour afficher un icône il vous faut faire votre choix dans la liste de l’ensemble des icônes de Font Awesome.

Liste des icônes

Exemple de code avec une tasse de café (cf doc Font Awesome) :

son nom (en HTML)
un glyph (en copiant/collant)
la valeur unicode f0f4 (en pseudo-element CSS)

Exemple en pseudo-element CSS :

.login::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f007";
 }

Font Awesome propose aussi une version payante, vous proposant un plus grand nombre d’icône à votre disposition (Regular, Light, Duotone). Certain icône ne pouvant tout simplement pas être utilisé, si vous ne disposez pas d’un compte « PRO ».

Si vous ne souhaitez pas d’un compte « PRO », vous aurez tout de même à votre disposition, plus de 1500 icônes :

https://fontawesome.com/icons?d=gallery&m=free

Cette vue vous propose une visualisation des icônes filtrés par type (Solid, Regular, Brands) :

https://fontawesome.com/cheatsheet

Un coup d’oeil sur la doc

On dispose d’un prefixe « fas » et on a choisi d’utiliser l’icône nommé « camera » :

<i class="fas fa-camera"></i>

Idem avec un « span » :

<span class="fas fa-camera"></span>

Le prefixe vous permet de choisir le type à utiliser :

fas pour solid (compte FREE) – font-face weight à 900
fab pour brands (compte FREE) – font-face weight à 400
far pour regular (uniquement sur un compte PRO) – font-face weight à 400
fal pour light (uniquement sur un compte PRO) – font-face weight à 300
fad pour duotone (uniquement sur un compte PRO) – font-face weight à 900

Vous pouvez choisir la couleur de l’icône :

<span style="font-size: 3em; color: Tomato;">
  <i class="fas fa-camera"></i>
</span>

Vous pouvez choisir la taille de l’icône :

fa-xs
fa-sm
fa-lg
fa-2x
fa-3x
fa-5x
fa-7x
fa-10x

Exemple :

<i class="fas fa-camera fa-xs"></i>

Exemple :

<div style="font-size: 0.5rem;">
    <i class="fas fa-camera fa-3x"></i>
</div>

ou encore via (grow-x et shrink-x) :

<div class="fa-4x">
    <i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
    <i class="fas fa-seedling" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="grow-6" style="background:MistyRose"></i>
</div>

Vous pouvez choisir la rotation de l’icône :

<div class="fa-4x">
    <i class="fas fa-snowboarding"></i>
    <i class="fas fa-snowboarding fa-rotate-90"></i>
    <i class="fas fa-snowboarding fa-rotate-180"></i>
    <i class="fas fa-snowboarding fa-rotate-270"></i>
    <i class="fas fa-snowboarding fa-flip-horizontal"></i>
    <i class="fas fa-snowboarding fa-flip-vertical"></i>
    <i class="fas fa-snowboarding fa-flip-both"></i>
</div>

ou encore via (rotate-x, flip-v et flip-h) :

<div class="fa-4x">
    <i class="fas fa-seedling" data-fa-transform="rotate-90" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="rotate-180" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="rotate-270" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="rotate-30" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="rotate--30" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="flip-v" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="flip-h" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="flip-v flip-h" style="background:MistyRose"></i>
</div>

Vous pouvez ajouter un cercle autour d’un icône :

// Juste un cercle :
// Remplacez "circle" par "square" pour obtenir un rendu carré.
<i class="far fa-circle fa-2x"></i>

// Icône + cercle :
<span class="fa-stack" style="vertical-align: top;">
    <i class="far fa-circle fa-stack-2x"></i>
    <i class="fas fa-flag fa-stack-1x"></i>
</span>

// Icône + cercle + inversion des couleurs :
<span class="fa-stack" style="vertical-align: top;">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>

Besoin d’icône pour une liste ?

<ul class="fa-ul">
    <li><span class="fa-li"><i class="fas fa-check-square"></i></span>xxx</li>
    <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>xxx</li>
    <li><span class="fa-li"><i class="far fa-square"></i></span>xxx</li>
</ul>

Vous pouvez ajuster la position de l’icône (up-x, down-x, left-x et right-x) :

<div class="fa-4x">
    <i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="shrink-8 up-.5" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="shrink-8 right-10" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="shrink-8 down-6" style="background:MistyRose"></i>
    <i class="fas fa-seedling" data-fa-transform="shrink-8 left-6" style="background:MistyRose"></i>
</div>

Vous pouvez cumuler 2 icônes l’un sur l’autre :

<div class="fa-4x">
    <i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i>
    <i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
    <i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" style="background:MistyRose"></i>
    <i class="fas fa-mask" data-fa-transform="shrink-3 up-1" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
</div>

Divers

Vous pouvez utiliser npm et yarn pour utiliser Font Awesome, bien sûr :

npm install --save @fortawesome/fontawesome-free
// ou
yarn add @fortawesome/fontawesome-free

NB : pour la version PRO c’est par ici.

Pour ceux qui le désirent, vous pouvez héberger sur votre serveur la lib :

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Pour les utilisateurs de :

WordPress
VueJS
Angular, Ember, jQuery, Less, React, React Native, Sass, Turbolinks il existe des projets dédiés.

Source : https://github.com/FortAwesome/Font-Awesome