Partager

Les icônes Font awesome


QU’est ce que Font awesome ? Font Awesome est une boîte à outils de polices et d’icônes basée sur CSS et moins. Elle a été conçue par Dave Gandy pour une utilisation avec Bootstrap, et plus tard a été incorporé dans le BootstrapCDN. ... Cela nous permettra d’utiliser les icônes proposées par Font Awesome.

Introduction Font awesome ?

Vous pouvez placer les icônes Font Awesome à peu près n’importe où en utilisant le nom de l’icône et un préfixe de style.

Font Awesome est conçu pour être utilisé avec des éléments en ligne, et il est recommandé d’utiliser un élément HTML cohérent pour référencer les icones dans votre projet.
Les éléments HTML que l’on peut utiliser sont : . <i> <em> <span>

Pour référencer une icône dans votre page web, vous devez avoir informations
1) son nom, préfixé avec fa-
Exemple : fa-home qui est le nom de l’icône que je veux utiliser
2) le style que vous voulez, utiliser le préfixe correspondant.
Exemple : la classe fas fa-home

Et voici le code que nous devrions insérer dans notre page web où nous voulons :

<i class="fas fa-home" style='font-size:48px; color: red'></i>

Ce qui donne:

Et comme vous avez certainement pu le remarquer j’ai aussi ajouté mon propre style avec l’attribut css style.
Comme pour n’importe que font. Nous pouvons utiliser les propriétés de style css comme on le fait pour tous les font (soit dans la balise elle même, dans le head de la page web ou dans une feuille de style).

Autre chose il faut obligatoirement insérer la balise link dans le head de la page web pour que le kit awesome 5 soit reconnu .
Voici la balise link :
<link rel="stylesheet" href=https://use.fontawesome.com/releases/v5.15.2/css/all.css&lgt;

Pour le style et dans la version gratuite, nous avons deux styles
1) Les font awesome de marques, comme par exemple : aple, bluetooth, bitcoin, … pour ces icône on utilise le préfixe ‘fab’.
Vous pouvez consulter les 457 icones gratuites sur le site web :
fontawesome.com/icons?d=gallery&s=brands&m=free
2) Un style solide,régulier et léger de chaque icône de Font Awesome, pour ces icones on utilise le préfixe ‘fa’ ou ‘fas’. Par exemple : fermer, ambulance , bicycle….
vous pouvez consulter les 1001 icones gratuites sur le site web :
fontawesome.com/icons?d=gallery&s=solid&m=free

Voici l’exemple de quelques icones

Code : HTML
Sélectionner le code

	
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync-alt fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-cog fa-pulse"></i>
<i class="fas fa-spinner fa-pulse"></i>

 

Et qui done le resultat suivant :

Exemples pratique

Comment faire une barre d’icones avec awesome 5

Barre d’icones horizontale

Code : HTML
Sélectionner le code


<!DOCTYPE html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
<style>
body {margin:0;}
.barre-icone {
  width: 80%;
  margin-left:10%;
  margin-top:5px;
  background-color: #505050;
  overflow: auto;
}
.barre-icone a {
  float: left;
  width: 20%;
  padding: 10px 0;
  transition: all 0.4s ease;
  color: #FFF9F9;
  font-size: 26px; 
  text-align: center;
}
.barre-icone a:hover {
  background-color: black;
}
.vert {
  background-color: #006F0F;
}
</style>
</head>
<body>
<div class="barre-icone">
  <a class="vert" href=""><i class="fa fa-home"></i></a> 
  <a href=""><i class="fa fa-globe"></i></a>
  <a href=""><i class="fa fa-search"></i></a> 
  <a href=""><i class="fa fa-envelope"></i></a> 
  <a href=""><i class="fa fa-times"></i></a> 
</div>
</body>
</html>

 

Le résultat sera comme suit

Barre d’icones verticale

Code : HTML
Sélectionner le code


<!DOCTYPE html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
<style>
body {margin:0;}

.barre-icone {
  width: 80px;
  margin-left:10%;
  margin-top:5px;
  background-color: #505050;
  overflow: auto;
}

.barre-icone a {
  display: block;
  padding: 10px 0;
  transition: all 0.4s ease;
  color: #FFF9F9;
  font-size: 26px; 
  text-align: center;
}
.barre-icone a:hover {
  background-color: black;
}
.vert {
  background-color: #006F0F;
}
</style>
</head>
<body>
<div class="barre-icone">
  <a class="vert" href=""><i class="fa fa-home"></i></a> 
  <a href=""><i class="fa fa-globe"></i></a>
  <a href=""><i class="fa fa-search"></i></a> 
  <a href=""><i class="fa fa-envelope"></i></a> 
  <a href=""><i class="fa fa-times"></i></a> 
</div>
</body>
</html>

 

Et voici le résultat:


Retour à l'accueil du site

Par carabde 10 Février 2021

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting
Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1 HTML5, CSS3, JavaScript pour débutants Tome 1
Premier tome d\'une série vidéo dédiée à l\'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

Balise input

Définit un contrôle d'entrée

SVG Dégradés de couleurs

SVG Dégradés de couleurs

Objet regexp javascript

Objet regexp javascript : Les expressions régulières sont des modèles utilisés pour vérifier des combinaisons de caractère dans les chaînes de caractères.