Comment intégrer des icônes sur son site web avec la librairie Font Awesome ?  

Partagé par ThibaudArros le 26/01/2017  —  2 min de lecture

tutoriel-comment-integrer-des-icones-sur-son-site-web-avec-la-librairie-font-awesome
4 LIGHTS 844 PERSONNES AIDÉES  

avatar ThibaudArros   (Level 7)
Intérêt : Informatique

Ce tuto t'a aidé ? Partage-le !



Pré-requis pour ce tutoriel :


Font Awesome est une librairie qui vous donne des icônes vectorielles évolutives qui peuvent être personnalisées (couleur, ombre portée...), en CSS.

I - Inclure la librairie

En téléchargement local

Rendez-vous sur http://fontawesome.io/ puis téléchargez la librairie d'icônes et faites le lien vers le fichier CSS dans la lablise <head></head> de votre page.

Avec CDN

Ajouter la ligne de code suivante dans la balise <head></head> de votre page :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

II - Intégrer ses icônes

Pour chaque icône de la librairie, correspond une class HTML à insérer dans une balise <i></i> :

<!DOCTYPE html>
<html>
  <head>
    // Intégration de la librairie avec le lien CDN
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    // Icône de loupe pour un champ de recherche par exemple
    <i class="fa fa-search"></i>
  </body>
</html>

Et voilà vous avez de belles icônes optimisées pour le web !

PS : Sur La Tutothèque, on utilise aussi Font Awesome... ;)


avatar ThibaudArros   (Level 7)
Intérêt : Informatique

Ce tuto t'a aidé ? Partage-le !



Tu as toi aussi des astuces ou des compétences à partager ? Ou tu souhaites tout simplement apprendre ? Rejoins notre communauté en t'inscrivant !


Commentaires (0)

Connecte-toi ou inscris-toi pour rédiger un avis.

Lis aussi . . .

Par L'informaticien

  le 20/11/2017

Comment convertir iTunes M4V Movies vers MP4

Salut Dans cette vidéo, je vais vous montrer Comment convertir iTunes M4V Movies vers MP4

Par johnart23

  le 13/03/2017

Comment récupérer l'espace perdu sur une carte SD ou clé USB ?

Dans ce tutoriel, vous allez apprendre comment récupérer l'espace perdu sur une carte SD ou clé USB...

Par L'informaticien

  le 24/09/2017

Récupérer les données supprimées d'un disque dur, usb, carte sd

Salut Dans cette vidéo, je vais vous montrer comment Récupérer les données supprimées d'un disque dur, usb, carte sd même après un formatage.

Par HFortier

  le 07/11/2016

Correcteur localisé : retirer automatiquement les pétouilles, taches, ... (Lightroom)

C'est un problème récurrent en photographie depuis l'avènement du numérique : les taches de capteur. Voici comment les retirer numériquement.

Par GdArros

  le 14/11/2016

Comment ne pas apparaître "en ligne" sur Facebook ?

Dans ce tutoriel nous allons voir comment rester invisible et ne pas être vu "en ligne" sur le chat Facebook et son application mobile Messenger.

  Rejoins la communauté !


Tuto Aléatoire