Sommaire

Les fontes-icônes

1. L’objectif

Foundation vous propose une fonte-icône afin d’insérer des icônes variées dans vos pages web, sous forme d’une police de caractères. Cela permet d’insérer des icônes qui sont très légères, contrairement à des images.

Le fichier de cet exemple à télécharger est Chapitre 07 / 07-typo-2.html.

2. L’installation

Dans un premier temps, il faut télécharger cette fonte-icône.

images/C07-012.png

Cliquez sur le bouton Download the Font.

Vous téléchargez une archive nommée foundation-icons.zip.

Décompressez-la pour obtenir un dossier nommé foundation-icons.

Dans ce dossier se trouvent plusieurs fichiers :

  • Une feuille de style nommée foundation-icons.css. Cette feuille de style crée la règle @font-face{...} :

@font-face { 
  font-family: "foundation-icons"; 
  src: url("foundation-icons.eot"); 
  src: url("foundation-icons.eot?#iefix") format("embedded-opentype"), 
       url("foundation-icons.woff") format("woff"), 
       url("foundation-icons.ttf") format("truetype"), 
       url("foundation-icons.svg#fontcustom") format("svg"); 
  font-weight: normal; 
  font-style: ...