Comment intégrer Font Awesome à vos sites web ?

Bonjour Ă  tous,


Vous ĂȘtes actuellement Ă  la recherche de belles icĂŽnes Ă  mettre en place sur votre site ? đŸ€”

Je vous présente "Font Awesome" !


Qu'est-ce que Font Awesome et Ă  quoi sert-il ?


"Font Awesome" permet d'ajouter des icĂŽnes directement depuis votre site

Cette solution présente plusieurs avantages, notamment :


  • une installation facile et rapide
  • un large choix d’icĂŽnes pour tous les goĂ»ts
  • la personnalisation des icĂŽnes
  • utilisation du lien en CDN (vous n'aurez pas Ă  hĂ©berger les fichiers d’icĂŽnes, tout se passe Ă  distance).
  • et bien plus encore...


Installation


Il existe plusieurs options pour intégrer Font Awesome sur votre site.

Pour utiliser la solution sans héberger les fichiers, utiliser l'option 1.

Si vous souhaitez au contraire hĂ©berger vous-mĂȘme les fichiers depuis votre serveur, utiliser l'option 2.


Option n°1 : Installation sans hébergement de fichiers


Pour installer Font Awesome sans héberger les fichiers, inscrivez-vous sur https://fontawesome.com, suivez les instructions et copier-coller le lien fourni dans la balise <head></head> de votre page web.

Vous pouvez aussi l'intégrer directement via le site web CDN.

Pour se faire, rendez-vous sur ce site web : font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

Le principe est le mĂȘme, vous n'aurez qu'Ă  choisir la version 5.x ou 6.x puis d'intĂ©grer le lien .css afin de l'intĂ©grer 😉


Option n°2 : Installation avec hébergement de fichiers


Pour l'hébergement des fichiers de la solution, rendez-vous sur ce lien et cliquer sur le bouton "Download Font Awesome Free for the Web".

Ouvrez le dossier téléchargé et vous devriez obtenir ceci :


--> fontawesome-free-5.15.4-web

  • --> css
  • --> js
  • --> less
  • --> metadata
  • --> scss
  • --> svgs
  • --> webfronts


Il vous suffit de copier ces dossiers et de les coller dans votre répertoire (bien souvent à la racine de votre site).

Les dossiers les plus utiles pour une utilisation standard sont : css, js


AprĂšs cela, ajoutez ces lignes de code :


Partie CSS

<head>
 <link rel="stylesheet" href="/css/all.css">
</head>


Partie JS

<body>
 <script defer src="/js/all.js"></script>
</body>


Et voila, pour l'installation, c'est tout bon ! 😋



Affichage des icĂŽnes sur votre site


Pour afficher une icÎne, vous devez au préalable en sélectionner un depuis ce lien

Vous pouvez rechercher un nom d'icÎne grùce à la barre de recherche et dÚs qu'une icÎne vous intéresse, cliquer dessus et copier le code en haut de page comme ceci :

<i class="fas fa-lock"></i>


Coller ensuite cette balise ou vous le souhaitez sur votre site ! 😜


Exemple :


<body>
 <i class="fas fa-lock"></i>
</body>


Vous pouvez remplacer "fas fa-lock" par le nom trouvĂ© sur le site Font Awesome 😁



Personnalisation des icĂŽnes


Pour personnaliser vos icĂŽnes, ajouter la balise "style" comme ci-dessous :


<i class="fas fa-lock" style="background-color: red"></i>



Conclusion


Vous l'aurez compris, l'intégration de Font Awesome est trÚs facile.

Vous trouverez toutes les informations complĂ©mentaires sur le site de Font Awesome 😁


En espĂšrent que ce tuto vous ait plu, n'hĂ©sitez pas Ă  poster un commentaire si vous avez des questions 😀

A trùs vite ! 😇

471 vues
23 janvier 2022 Ă  13:16 (ÉditĂ©)
Cette pub permet au site de vivre ...

2 commentaires

Tu veux participer ?
Alors connecte toi ou inscris toi et viens participer !

Merci @Alexoune001 😁

C'est modifiĂ© 👌

information complémentaire :

Vous pouvez aussi l'intégrer directement via le site web CDN.

Pour se faire, rendez-vous sur ce site web : font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

Le principe est le mĂȘme, vous n'aurez qu'Ă  choisir la version 5.x ou 6.x puis d'intĂ©grer le lien .css afin de l'intĂ©grer ;)


Pour l'utiliser, vous n'aurez tous simplement qu'Ă  utiliser la balise (exemple) :

<i class="fas fa-home"></i>


L'avantage :

L'avantage d'utiliser le lien en CDN est que vous n'aurez pas à héberger les fichiers d'icones, tout se passe à distance et donc vous n'aurez qu'à utiliser la balise citée en exemple ci-dessus (en remplaçant bien sûr le "home" par le nom de l'icone que vous souhaitez et que vous pouvez retrouver sur le site web de fontawesome).


Cette pub permet au site de vivre ...