Font Awesome - 31 place Web

TP 17 – Font Awesome
Font Awesome
Insertion d’icônes dans le texte
1- Préparation

Allez sur le site Font-Awesome : https://fortawesome.github.io/Font-Awesome/
Téléchargez le dossier source

Dans le dossier dézippé, récupérez :
- font-awesome.min.css (version compressée) et placez-le dans votre propre dossier
CSS (blog du webmaster)
- Tout le contenu du dossier [fonts] qui sera placé dans votre propre dossier [fonts]
2- Lier la police

Dans les fichiers HTML du site (index, contact…), liez la feuille de style fontawesome.

Pour ce projet, l'arborescence et le nom des dossiers correspond bien : ainsi, la
1ere ligne de font-awesome.min.css permet bien « d'aller chercher » les polices
dans le bon dossier [fonts] :
family:'FontAwesome';src:url('../fonts/
Attention pour un autre projet à adapter l'URL (si le CSS est à la racine du site par
exemple)
3- Insertion d’icônes

Créer des icône pour les titres, menus, paragraphes… directement en HTML en
appliquant à la balise <i></i> les classes correspondantes.
Par exemple :
<h1><i class="fa fa-envelope-o"></i> Contact</h1>
Page 1 sur 2
=>
http://31-place-web.net/HTML5-CSS3
TP 17 – Font Awesome

Trouvez les icônes en faisant une recherche (en Anglais) à cette page :
http://fortawesome.github.io/Font-Awesome/icons/

Cliquez sur l’icône pour obtenir le code à copier-coller dans vos pages HTML

Allez voir à la page d'exemple comment faire des menus, icones animées, grossir
la taille… : http://fortawesome.github.io/Font-Awesome/examples/
Note 1:
Par défaut, l'icône prend la taille de la police dans laquelle elle est insérée (propriété fontsize)
Note 2 :
L’icône est considérée comme du texte, vous pouvez donc lui appliquer les propriétés
CSS de texte : color, font-weight...
Page 2 sur 2
http://31-place-web.net/HTML5-CSS3