Comment in­cor­po­rer une icon font à un document HTML

Notre article sur l’icon font donne une dé­fi­ni­tion de ce qu’est ce programme soit une police de caractère vec­to­ri­sée qui utilise des pic­to­grammes fonc­tion­nels à la place de lettres. Les dé­ve­lop­peurs Web adeptes des icon font bé­né­fi­cient du large spectre d’avantages que pré­sen­tent ces vecteurs adap­tables. Au contraire des polices pixé­li­sées, les polices vec­to­ri­sées sont définies in­dé­pen­dam­ment des pé­ri­phé­riques de sortie avec des lignes, des ronds, des polygones voire des courbes. Cela permet une trans­for­ma­tion basée sur CSS pratique et sans perte. Les icônes cor­res­pon­dants ne doivent pas être chargés et adaptés de manière séparée dans un programme de graphisme. Au lieu de cela, un formatage est réalisé sur la base d’un code dans le na­vi­ga­teur. Une des icônes font qui repose sur le fichier CSS dans l’en-tête HTML doit être in­cor­po­rée. Quelques icônes sont intégrées par la suite via l’attribut HTML « class » dans le site Internet. Notre article expose l’exemple du fonc­tion­ne­ment de la police open source Font Awesome.

Le site Font Awesome compte plus de 600 icônes, ce qui fait de lui l’une col­lec­tions de symboles vec­to­ri­sés les plus complètes de la Toile. Elle est mise à dis­po­si­tion gra­tui­te­ment. Pour in­cor­po­rer cet outil à un site Internet, le dé­ve­lop­peur Web aura besoin d’un paquet d’ins­tal­la­tion. Ce dernier est dis­po­nible sur le site de Font Awesome (http://for­ta­we­some.github.io/Font-Awesome/) [Font Awesome est une bi­blio­thèque d’icônes vec­to­riels adap­tables]. L’in­té­gra­tion des icon fonts se fait en trois étapes :

1. Té­lé­char­ge­ment du paquet d’ins­tal­la­tion
   
   
2. In­té­gra­tion de la feuille de style dans l’en-tête du document HTML : pour intégrer Font Awesome au site Internet, il faut que le document HTML cor­res­pon­dant soit relié avec le fichier CSS standard présent dans le paquet d’ins­tal­la­tion. Par la suite, le code suivant est intégré dans l’en-tête HTML : <link rel="sty­le­sheet" href="https://www.ionos.fr/digitalguide/path/to/font-awesome/css/font-awesome.min.css"> L’espace réservé « path/to/ » re­pré­sente le chemin de fichier du projet Web sur le serveur.
   
   
3. Intégrer des icônes : si la référence au fichier CSS est créée, des pic­to­grammes décrits dans l’icon font sont in­cor­po­rés partout dans le code source HTML. Par la suite, Font Awesome propose un i-élément vide qui est combiné avec l’attribut class. Les classes dérivent du préfixe CSS « fa » et du nom de l’icône respectif : <i class="fa fa-home"></i> Le code d’in­té­gra­tion d’une icône peut ressortir du site Internet Font Awesome.

En guise d’al­ter­na­tive au i-élément, une icône peut également être intégrée via une balise span vide sé­man­ti­que­ment.