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 692 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 Christina

  le 01/08/2018

Comment devenir développeur Web ?

Dans ce tutoriel, vous allez apprendre facilement comment devenir développeur web

Par CRFormations

  le 14/05/2017

Windows - Bureaux Virtuels | Comprendre et Utiliser

Comprendre, apprendre et utiliser les bureaux virtuels. Ce tutoriel va vous permettre de maîtriser le sujet en quelques minutes.

Par CRFormations

  le 07/11/2016

Smash : le transfert de fichiers gratuit ET sans limite de taille

Smash est unique en son genre puisqu'il vous permet d'écouter ou de visualiser les fichiers que vous recevez avant même de les télécharger.

Par L'informaticien

  le 20/01/2017

Comment savoir si mon pc est piraté

Salut Dans cette vidéo, je vais vous montrer Comment savoir si mon pc est piraté

Par L'informaticien

  le 05/01/2018

Coolmuster Android Assistant: Pour gérer les données mobiles /sauvegarder et res

Salut Dans cette vidéo, je vais vous montrer Coolmuster Android Assistant: Pour gérer les données mobiles /sauvegarder et restaurer les données.

  Rejoins la communauté !


Tuto Aléatoire