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 730 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 GmR

  le 02/11/2016

Comment faire des tutos sous Linux : 04 - L’affichage des touches (et souris)

Comment faire des tutos sous Linux : 04 - L’affichage des touches (et souris)

Par HFortier

  le 13/01/2017

Créer, gérer et administrer les utilisateurs sur son NAS Synology

Comment créer un utilisateur sur un NAS Synology ? Quelles sont les options disponibles le concernant, à quoi servent elles et comment les utiliser ?

Par L'informaticien

  le 22/02/2017

comment télécharger les documents de scribd gratuitement

Salut Dans cette vidéo, je vais vous montrer comment télécharger les documents de scribd gratuitement

Par L'informaticien

  le 15/02/2018

Comment Effacer , Supprimer Vos Données Personnelles D'un Disque Dur, Clé USB Dé

Salut tout le monde Dans ce tuto je vais vous expliquez Comment Effacer , Supprimer Vos Données Personnelles D'un Disque Dur, Clé USB Définitivement

Par johnart23

  le 30/01/2017

Cordial : correcteur d'orthographe en ligne gratuit

Dans ce tutoriel, vous allez apprendre à corriger un texte à partir du site Cordial en ligne...

  Rejoins la communauté !


Tuto Aléatoire