TRES IMPORTANT A SAVOIR :
L'utilisation de Font Awesome dans une page HTML implique que cette page soit liée à la feuille de styles spécifique propre à Font Awesome. Cette feuille de style a pour nom font-awesome.min.css.
Comment obtenir cette feuille de styles ?
Il est possible d'extraire le fichier correspondant à la feuille de styles en téléchargeant Font Awesome sur le site officiel http://fortawesome.github.io/Font-Awesome.
Cette feuille de styles extraite, vous devez
- la copier dans le dossier contenant les fichiers de votre site
- annoncer cette feuille de styles dans la partie <head></ head> du document
Conseils : sur ce site, nous conseillons plutôt
- d'insérer le lien suivant (avec l'adresse absolue de la
feuille de styles) dans la partie <head></ head> du
document :
link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
ce qui évite téléchargement et installation,
- utiliser le logiciel BlueGriffon,
- pour vous aider, consulter cette fiche.
Quel est le rôle de la feuille de styles de Font Awesome ?
css/font-awesome.min.css
dans un éditeur de texte vous constatez la présence d'une succession
de classesToutes les classes contenues dans la feuille de styles de Font Awesome, ne sont pas destinées à afficher une icone, certaines classes permettent d'améliorer l'affichage des icones. Elles s'additionnent à la classe d'origine.
- Agrandir la taille d'une icone Font Awesome
Par défaut l'icone affichée est de la même taille que le texte auquel elle est attachée.
Il existe des classes complémentaires qui permettent de l'agrandir ( jusqu'à 5 fois) comme :
- fa-lg (cette classe permet d'augmenter la taille de l'icone de 33 %)
- fa-2x la taille de l'icône est doublée
- fa-3x la taille de l'icône est 3 fois plus grande
- fa-4x la taille de l'icône est 4 fois plus grande4
- fa-5x la taille de l'icône est 5 fois plus grande
Il suffit de rajouter une de ces classes à la classe d'origine comme ceci par exemple :
- Animer une icône
La classe fa-spin permet de faire tourner une icone indéfiniment comme par exemple appelée par la classe fa-spinner
- Faire pivoter une icône
La classe fa-rotate-[degrés de rotation], permet d'obtenir la rotation statique d'une icone
Dans l'exemple ci-dessus, la classe utilisée pour faire tourner l'image de 180 ° est fa-rotate-180.
-
Apliquer une symétrie horizontale ou verticale
La classe fa-flip avec l'attribut horizontal ou vertical permet d'obtenir une symétrie horizontale ou verticale de l'icone désignée comme dans l'exemple ci-dessous.
- Utiliser Font Awesome dans les listes
Les classes fa-ul et fa-li permettent de
personnaliser une liste avec des icones distinctes.
Le mode opératoire proposé est de saisir code indiqué
ci-dessous.
<ul class="fa-ul">
<li> <i class="fa-li
fa fa-icone1"> </i> ligne 1
</li>
<li> <i class="fa-li
fa fa-icone2"> </i> ligne 2
</li>
<li> <i class="fa-li
fa fa-icone3"> </i> ligne 3
</li
</ul>
Légende :
- fa-icone1 fa-icone2 ou fa-icone3
correspondent aux icones remplaçant les puces classiques.
- ligne 1, ligne 2, ligne 3
correspondent aux titres des 3 lignes de la liste
