Qu'est-ce que les icônes CSS ?
Les icônes sont fournies dans des bibliothèques vectorielles évolutives qui peuvent être personnalisées avec CSS
Les bibliothèques communes sont :
- Icônes impressionnantes de police
- Icônes d'amorçage
- Icônes Google
Comment?
Pour utiliser des icônes, ajoutez simplement un lien vers la bibliothèque d'icônes dans la
<head>section de votre page HTML :
Aucun téléchargement ou installation requis !
Pour insérer une icône, ajoutez le nom de la classe d'icônes à n'importe quel élément HTML en ligne comme <i>ou <span>.
Exemple impressionnant de police
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-cloud"></i>
<i class="fa
fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
</html>
Pour une liste complète des icônes (Font Awesome, Bootstrap et Google), visitez la référence des icônes de W3School .
Exemple d'amorçage
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon
glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i
class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon
glyphicon-thumbs-up"></i>
</body>
</html>
Exemple Google
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i
class="material-icons">favorite</i>
<i
class="material-icons">attachment</i>
<i
class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>
Tutoriel complet sur les icônes
Ceci a été une brève description des icônes.
Pour un didacticiel complet sur les icônes, accédez au didacticiel sur les icônes W3Schools .
Pour une référence complète des icônes, allez à W3Schools Icons Reference .