Vous voyez de plus en plus d'icônes sur de nombreus sites, et vous aimeriez en utiliser aussi mais ne savez pas comment faire ?
Lisez ce qui suit pour intégrer ces nouveaux petits caractères 馃槉
On va prendre ici l'exemple d'une police connue : FontAwesome
Voici la structure HTML :
<!DOCTYPE html>
<html>
<head>
<title>Hello Font Awesome</title>
</head>
<body>
<h1>Hello Font Awesome</h1>
</body>
</html>
Ajoutons Font Awesome, je vais ici faire appel à un CDN. Je vais ici utiliser l'icône de maison pour l'exemple. Voici notre fichier actualisé :
<!DOCTYPE html>
<html>
<head>
<title>Hello Font Awesome</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<h1>Hello Font Awesome</h1>
<i class="fas fa-home"></i>
</body>
</html>
Ouvrez votre fichier dans votre navigateur web et admirez le résultat 馃槈
Bien sûr, occupons-nous en.
J'ai choisi ici de mettre le CSS dans le HTML, pour ne pas avoir à créer un nouveau fichier, mais le principe est bien évidemment le même.
Voici notre fichier actualisé :
<!DOCTYPE html>
<html>
<head>
<title>Hello Font Awesome</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<style type="text/css">
.fa-home
{
color: #00BFFF;
}
</style>
</head>
<body>
<h1>Hello Font Awesome</h1>
<i class="fas fa-home"></i>
</body>
</html>
Vous pouvez bien évidemment aller beaucoup plus loin, voici un exemple :
<!DOCTYPE html>
<html>
<head>
<title>Hello Font Awesome</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<style type="text/css">
.fa-home
{
color: #00BFFF;
font-size: 1.6em;
padding: 20px;
border: solid 2px gray;
border-radius: 50%;
background-color: rgba(200,200,200, 0.7);
-webkit-animation: rotation 2s infinite linear;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
</style>
</head>
<body>
<h1>Hello Font Awesome</h1>
<i class="fas fa-home"></i>
</body>
</html>
Amusez-vous avec vos nouvelles icônes 馃槈
Ajout茅 le : 01/02/2019 par Karim
Suggestion d'articles et de cours dans les m锚mes cat茅gories que "Utilisez une police d'ic么nes" :