Comment utiliser Font Awesome pour Bootstrap

Font Awesome est une police composée de symboles, d’icônes ou de pictogrammes que l’on peut utiliser dans une page Web, tout comme une police.

Pour configurer la Font Awesome sur sa page web, inclure cette ligne dans le <head> :

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Comment ça marche ?

Pour ajouter une icône à sa page Web, utiliser une simple balise <i> pour placer une icône dans sa page, comme ceci :

<i class="fa fa-home"></i>

On peut utiliser les glyphicons de différentes manières, dans des boutons, des groupes de boutons pour une barre d’outils, une navigation ou des entrées de formulaire préfixées. Voici deux exemples de glyphicons.

Boutons :

<button type="button" class="btn btn-default btn-lg">
  <i class="fa fa-star"></i> Etoile 
</button>
<div class="btn-toolbar" role="toolbar"> 
  <div class="btn-group"> 
    <button type="button" class="btn btn-default"> 
      <i class="fa fa-align-left"></i> 
    </button>
    <button type="button" class="btn btn-default"> 
      <i class="fa fa-align-center"></i> 
    </button>
    <button type="button" class="btn btn-default"> 
      <i class="fa fa-align-right"></i> 
    </button>
    <button type="button" class="btn btn-default"> 
      <i class="fa fa-align-justify"></i> 
    </button>
  </div> 
</div>

Awesome v.4.7.0 | Bootstrap Cheat Sheets

Cliquer sur le logo pour accéder au site des pictos Font Awesome pour Bootstrap :