Les symboles sont de plus en plus populaires sur les sites Web, car ils permettent de transmettre facilement et rapidement des idées ou des concepts. Suite à cette vulgarisation des symboles sur Internet, de nombreuses bibliothèques de symboles ont vu le jour, par ex. B. Font Awesome, qui compte actuellement plus de 1 600 icônes gratuites et pas moins de 7 800 icônes accessibles via le plan payant «Standard».

En une ligne de code, grâce à Font Awesome et à d’autres bibliothèques de symboles sur votre site Web, vous pouvez afficher un symbole graphique qui, dans la plupart des cas, remplacera une image beaucoup plus lourde et moins actuelle.

Dans ce guide, nous allons nous concentrer sur l’utilisation de la bibliothèque Font Awesome pour afficher ses icônes sur un site.

Soumettez gratuitement votre projet à Codeur.com, recevez quinze devis et choisissez le développeur web idéal.

Trouver un développeur Web

Installation de Font Awesome 5

Il existe deux façons principales et simples d’utiliser Font Awesome sur votre site Web:

  1. Créer un lien avec la librairie via un hébergeur externe ou le kit Font Awesome
  2. Téléchargez la bibliothèque et téléchargez-la sur votre site Web
Vous pouvez également demander à un développeur Web indépendant d’installer Font Awesome sur votre site Web. Publiez votre annonce sur Codeur.com et obtenez des devis en quelques minutes.

Option 1: Commencez à utiliser Font Awesome avec le kit spécial

Font Awesome fournit un « kit » qui vous permet d’utiliser la bibliothèque sur votre site sans avoir à télécharger la bibliothèque entière, en fournissant simplement une ligne de « script » dans le code de votre site.

Pour que cette ligne soit écrite dans votre code, vous devez: https://fontawesome.com/start.

Entrez votre adresse e-mail et cliquez sur « Envoyer le code du kit »:

Font Awesome du programme d'installation

Vous recevrez un e-mail avec un bouton « Cliquez pour vérifier votre adresse e-mail + éléments à configurer ». Cliquez dessus pour être dirigé vers un formulaire d’inscription. Saisissez et validez les informations demandées pour votre inscription.

Cela vous donnera accès à votre kit personnel et à la ligne de code qui vous permettra d’utiliser Font Awesome.

Font Awesome du programme d'installation

Copiez la ligne avec le bouton « Copier le code du kit! » «Alors ouvrez-le Votre éditeur de texte ou IDE préféré pour modifier le code de votre site.

Comme indiqué sur la page de votre kit, vous aurez besoin de cette ligne de code entre les balises et Insérez dans votre site:

<head>
   <script src="https://kit.fontawesome.com/45e38e596f.js" crossorigin="anonymous"></script>
</head>

Veuillez noter que la ligne de code incluse dans le kit est unique pour chaque utilisateur. Par conséquent, ne copiez pas la ligne de code donnée dans les exemples du manuel, mais utilisez la ligne de code que vous recevez après votre inscription à la bibliothèque Font Awesome.

Si vous ne souhaitez pas utiliser le kit Font Awesome mais que vous souhaitez tout de même utiliser un CDN pour utiliser la bibliothèque Font Awesome, vous pouvez utiliser les scripts proposés par CloudFlare, que vous trouverez sur cette page: https://cdnjs.com/libraries/font-awesome

Récupérez la ligne de code à inclure entre les balises « header » de votre code en cliquant sur l’icône la version et le module de Font Awesome de votre choix.

Option 2: Installez la bibliothèque dans votre logement

Rendez-vous à https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself et cliquez sur le bouton « Télécharger Font Awesome gratuitement pour le Web » pour télécharger la dernière version de la bibliothèque Font Awesome.

Décompressez la bibliothèque et transférez-la sur votre hébergement. Ensuite, dans votre code, tout comme dans le kit Font Awesome ou dans le CDN CloudFlare, vous devez avoir une ligne de code entre les balises et Votre code pour indiquer l’emplacement de la bibliothèque.

Pour utiliser la bibliothèque Font Awesome à partir des feuilles de style CSS, ajoutez la ligne de code suivante:

<head>
   <link href="/chemin-vers-fontawesome/css/all.css" rel="stylesheet">
</head>

Si vous préférez utiliser Font Awesome plutôt que des fichiers JavaScript, intégrez le code suivant dans ce cas:

<head>
   <script defer src="/chemin-vers-fontawesome/js/all.js"></script>
</head>

Dans les deux cas, remplacez « path-to-fontawesome » par le chemin où vous avez installé la bibliothèque Font Awesome sur votre hôte.

Trouvez le meilleur développeur Web sur Codeur.com

Vos premiers devis en 15 minutes

Gratuit et sans engagement

Déjà plus de 75000 clients

Trouvez un pigiste

Utilisez les icônes Font Awesome

Une fois que vous avez installé Font Awesome sur votre site Web, il est prêt à être utilisé dans votre code.

Affichez les icônes Font Awesome sur votre site Web

Vous pouvez trouver tous les symboles qui se trouvent dans la bibliothèque Font Awesome dans la galerie de symboles accessible à cette URL: https://fontawesome.com/icons?d=gallery Chaque symbole a un nom. Vous pouvez utiliser ce nom pour indiquer à la bibliothèque le symbole à afficher. Pour afficher une icône Font Awesome, ajoutez le code suivant à l’endroit où vous souhaitez afficher l’icône et remplacez « Nom de l’icône » par le nom de l’icône à utiliser:

<i class="far fa-nom-icone"></i>

Donc, si vous souhaitez afficher une icône d’émoticône en colère, ajoutez le code suivant:

<i class="far fa-angry"></i>

Et vous verrez cette icône sur votre site Web:

Personnaliser les icônes de polices géniales

Les symboles Font Awesome sont en fait des polices, ils sont donc sensibles aux propriétés CSS liées aux polices. Cela vous permet de modifier la taille, la couleur ou d’autres caractéristiques d’une police.

Par exemple, si vous voulez rendre votre émoticône en colère toute rouge, vous pouvez le faire simplement en changeant sa couleur, tout comme en changeant la couleur d’un texte:

<i class="far fa-angry" style="color:red"></i>

Votre icône sera rouge:

Conclusion

Les symboles sont une très bonne méthode graphique pour illustrer une idée et remplacent très souvent parfaitement l’utilisation d’une image. Les bibliothèques comme Font Awesome offrent désormais une grande variété de symboles pour chaque concept possible et imaginable. De nouveaux symboles sont ajoutés régulièrement pour offrir aux utilisateurs de ces bibliothèques un choix toujours plus grand de symboles.

Si vous avez besoin d’aide pour installer correctement Font Awesome sur votre site Web, veuillez contacter Publier une annonce gratuite sur Codeur.com. Vous pouvez rapidement trouver de l’aide auprès d’un développeur Web indépendant.



Source link

Recent Posts