Les icônes Font awesome:Faire une barre d’icones

Introduction Fontawesome ?

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 : .

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 :

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 : , , , … 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 : , , ….
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

Copier 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

Copier 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

Copier 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

Les icônes Fontawesome

Comment faire?

Introduction Fontawesome ?

Comment faire une barre d’icones avec awesome 5

Barre d’icones horizontale

Barre d’icones verticale

La méthode secrète likes sans fin sur Facebook