Utilisez une police d'icônes

CSS
Tuto

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 😉

Est-ce qu'on peut changer la couleur de notre icône ?

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 😉

Retour au blog

Ajouté le : 01/02/2019 par Karim