WhatZeWeb

show me code
  • Accueil
  • Blog
  • Cours
  • Accueil
  • Blog
  • Utilisez une police dicones

Utilisez une police d'ic么nes

  • CSS
  • Tuto
Arbre ic么nes

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

Suggestion d'articles et de cours dans les m锚mes cat茅gories que "Utilisez une police d'ic么nes" :

BootstrapInt茅grer Bootstrap 4 dans votre projet
jQueryUne barre de navigation fixe avec jQuery
CSSStructurez votre page CSS correctement
SymfonyG茅rez vos ressources avec Symfony
  • © WhatZeWeb. Tous droits r茅serv茅s
  • Mentions l茅gales