Icônes W3.CSS
Bibliothèques d'icônes
Avec W3.CSS, vous pouvez utiliser la bibliothèque d'icônes que vous aimez, par exemple :
- Icônes impressionnantes de police
- Icônes de conception de matériel Google
- Icônes d'amorçage
Utilisation d'une bibliothèque d'icônes
Pour insérer une icône :
- Incluez la bibliothèque d'icônes d'un CDN (Content Delivery Network) dans la section <head>.
- Ajoutez le nom de la classe d'icônes à n'importe quel élément HTML en ligne.
Astuce : Les éléments <i> et <span> sont largement utilisés pour ajouter des icônes.
Pour contrôler la taille de l'icône, modifiez la propriété font-size de l'icône ou utilisez l'une des classes w3 - size :
- w3-minuscule
- w3-petit
- w3-grand
- w3-xxlarge
- w3-xxxlarge
- w3-jumbo
Quelques icônes impressionnantes de police
fa fa-maison
fa-bars
fa fa-flèche-gauche
fa fa-flèche-droite
fa fa-recherche
fa fa-fermer
fa fa-rafraîchir
fa fa-poubelle
fait mal
fa fa-voiture
fa fa-camion
fa fa-avion
Exemple
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
</body>
</html>
Pour une liste complète des icônes : Visitez notre référence d'icônes
Quelques icônes de Google Material Design
domicile
domicile
domicile
menu
menu
menu
arrow_back
arrow_back
arrow_back
arrow_forward
arrow_forward
arrow_forward
chercher
chercher
chercher
Fermer
Fermer
Fermer
rafraîchir
rafraîchir
rafraîchir
effacer
effacer
effacer
personne
personne
personne
directions_car
directions_car
directions_car
expédition_locale
expédition_locale
expédition_locale
aéroport_local
aéroport_local
aéroport_local
Exemple
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>
</body>
</html>
Quelques icônes Bootstrap
domicile
hamburger menu
arrow_back
arrow_forward
chercher
supprimer
rafraîchir
déchets
utilisateur
déposer
imprimer
avion
Exemple
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
</body>
</html>