Developpeur / integrateur web (Growth Hacker)

Actualité web, solution Saas, CMS, eCommerce, Framework (VueJS, Symfony, CSS), avec une pointe de SEO.

Font Awesome c’est quoi ?

par · Publié · Mis à jour

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.

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 :

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

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 :

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

Étiquettes :

Michael

Développeur / intégrateur, travaillant en agence web depuis 2005, je viens à présent vous proposer de venir découvrir mes créations personnelles de plugins / themes pour le CMS Wordpress & Prestashop, quelques solutions en mode SAAS & un peu d'actualité web ( / Twitter).

Vous aimerez aussi...