Ce site utilise des cookies pour améliorer uniquement votre expérience utilisateur.
Vous pouvez lire Ă tout moment comment nous utilisons les cookies sur le site.
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 :
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 --> webfrontsIl 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 ! đ
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).
Ce site utilise des cookies pour améliorer uniquement votre expérience utilisateur.
Vous pouvez lire Ă tout moment comment nous utilisons les cookies sur le site.