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

Regarder aussi nos cours :

base de donnés gestion de contacts

Script php bdd contact finie

fonction date_sunset">date_sunset()

Retourne l’heure du coucher du soleil pour un jour et un endroit donnés

fonction htmlspecialchars_decode, htmlspecialchars_decode

Convertit les entités HTML spéciales en caractères