Protége les méta caractères
FontAwesome est une boîte à outils de polices et d’icônes basée sur CSS. Cela nous permettra d’utiliser les icônes proposées par 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.
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
<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
Code : HTML
<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 :
Code : HTML
<!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
Code : HTML
<!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: