Bibliothèque d'icône Font Awesome

Comment utiliser la bibliothèque d’icônes Font Awesome ?

On a parfois besoin d’ajouter rapidement et simplement des icônes sur son site internet, dans les menus ou tout simplement dans les contenus. Font Awesome dans sa version 4.6.3, disponible gratuitement sur le Web propose 634 icônes différentes, de quoi avoir le choix !

Font Awesome, c’est quoi ?

C’est une police de caractères qui permet d’afficher des icônes, des pictogrammes sur un site Web, mais aussi à l’intérieur d’un document Photoshop, Illustrator, Word, Open Office… Crée initialement pour être utilisée avec Bootstrap, elle peut s’utiliser avec n’importe quel projet. Toutes les icônes sont gratuites, personnalisables et redimensionnables à souhait, car sous format vectoriel.

 

Planche d'icônes Font Awesome
Exemple d’icônes disponibles sur le site Font Awesome

Comment utiliser Font Awesome ?

Pour des documents bureautiques, les maquettes print ou Web…

L’utilisation est très simple. La première chose à faire est de vous rendre sur la page fontawesome.io/get-started/ et de télécharger le dossier Font Awesome. Une fois dézippé, ouvrez le dossier et vous allez avoir à l’intérieur plusieurs dossiers dont un nommé fonts qui permet d’installer les fichiers de police sur votre ordinateur.

 

Le contenu du dossier Font Awesome à télécharger
Le contenu du dossier Font Awesome à télécharger

Une fois les polices Font Awesome installées, vous allez pouvoir les intégrer dans n’importe quel document. Petite astuce pour cela, vous devez aller sur cette nouvelle page Web fontawesome.io/cheatsheet/ et copier coller l’icône et pas le code unicode et bien sûr sélectionner la police Font Awesome sur votre document.

 

Photoshop
Exemples d’icônes Font Awesome intégrée dans un fichier Photoshop

Intégrer des icônes dans vos projets Web

Plusieurs solutions sont possibles. Je vous parlerai uniquement des utilisations les plus courantes. Il faut savoir qu’il existe des installations via LESS ou SASS et vous trouverez la documentation sur cette page fontawesome.io/get-started/

Avec une feuille de style CSS

Vous téléchargez le dossier Font Awesome. Vous copiez le répertoire de polices en entier dans votre projet web et vous lier la feuille de style css dans le <head> de votre fichier html sous cette forme <link rel = “stylesheet” href = ” path / to / font -awesome / css / font – awesome.min.css ” > en indiquant bien le chemin d’accès de votre fichier awesome.min.css

Il ne vous reste plus qu’à intégrer vos icônes. Il n’y a rien de plus facile. Allez sur la page fontawesome.io/icons/, cliquez sur l’icône de votre choix, copiez le code html de l’icône et collez le dans votre fichier web, à l’emplacement où vous le voulez. Ensuite, vous pouvez personnaliser votre icône.

 

Voir la page d’exemple fournie par Font Awesome fontawesome.io/examples/

fontawesome-5

fontawesome-6

fontawesome-7

 

Avec le CDN Fonte Awesome

C’est la façon la plus rapide et la plus simple. Aucun téléchargement, aucune installation à faire. Il faut créer un compte, obtenir son code personnalisé et ensuite, c’est juste une ligne de code à coller dans le <head> de votre projet Web. C’est la méthode que j’utilise tellement c’est simple et rapide.

 

Font Awesome
Code fourni par Font Awesome CDN, après création de son compte

 

Avec l’utilisation du CDN, pas besoin de mettre à jour la version téléchargée des icônes. Quand une nouvelle police d’icône est ajoutée, elle est automatiquement disponible. La rapidité d’affichage des icônes est optimisée via le CDN.

Et pour intégrer des icônes dans votre projet web, c’est exactement comme au-dessus avec l’utilisation de la feuille de style css. On copie/colle le code html de la police d’icône et on la personnalise.

Voilà comment intégrer des icônes dans vos projets. J’ai pris l’exemple de Font Awesome, parce que cela fonctionne très bien et que le choix d’icônes est très important. C’est celui que j’utilise personnellement dans mes projets Web.

Auteur : Denis ALLARD

Denis ALLARD
Rédacteur Web sur le blog studiovitamine depuis 2009, j'ai pu mesurer l'évolution fulgurante du web, des nouvelles technologies, du e-commerce... Quand je n'écris pas pour le web, je me consacre à l'ergonomie, au référencement naturel et à la formation universitaire des futurs concepteurs de sites...

Commentaires Facebook

2 Commentaires

  1. MERCI MERCI MERCI !!!
    Je débute dans le développement et je me suis arracher les cheveux avec ces icônes que je vois partout (notamment ceux de Glyphicons) et je n’arrivais pas à les insérer, j’y arrive maintenant grâce à votre aide !!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *