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 627 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 27/03/2018

Tuto : Convertir/Transformer un Fichier PowerPoint en Video HD

Salut mes frères / soeurs Dans ce tuto je vais vous expliquez Comment Convertir/Transformer un Fichier PowerPoint en Video HD

Par GmR

  le 02/11/2016

Récupérer le time code des sous titres Youtube en vue de les corriger dans AEGsub

Récupérer le time code des sous titres Youtube en vue de les corriger dans AEGsub

Par HFortier

  le 07/11/2016

Outil plume : Tracer une ligne, une courbe ou une forme (Photoshop)

L'outil plume permet de nombreuses choses : tracer des lignes et des courbes, dessiner des formes complexes, effectuer des sélections complexes.

Par Bonnie & Cloud

  le 23/08/2017

Comment consulter son historique Google Chrome depuis son smartphone Android ?

Google chrome ne permettant pas de consulter par défaut son historique de navigation sur internet, voici une méthode toute simple le permettant.

Par GmR

  le 31/10/2016

Ajouter un effet vapeur gimp 2.8

Tuto en français pour ajouté de la vapeur sur une photo.

  Rejoins la communauté !


Tuto Aléatoire