Bibliothèques d'icônes
Avec W3.CSS vous pouvez utiliser une bibliothèque d'icônes comme:
- Icônes Superbes polices
- Google Matériel Icônes
- bootstrap Icons
Utilisation d'icônes
Pour utiliser une icône, il suffit d'ajouter le nom de l'icône à la classe d'un HTML <i> élément.
Pour contrôler la taille de l'icône, modifiez la propriété font-size de l'icône, ou utiliser les classes w3- de taille:
- w3-tiny
- w3-petit
- w3-large
- w3-XXLarge
- w3-XXXLarge
Icônes Superbes polices
fa fa-home
fa fa-bars
fa fa flèche gauche
fa fa-flèche droite
fa fa-recherche
fa fa-close
fa fa-refresh
fa fa-trash
fa fa-mâle
fa fa-voiture
fa fa-camion
fa fa-plan
Exemple
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-cloud
w3-large"></i>
<i class="fa fa-cloud w3-xlarge"></i>
<i class="fa fa-cloud
w3-xxlarge"></i>
<i class="fa fa-cloud w3-xxxlarge"></i>
<i class="fa fa-cloud
w3-text-teal"
style="font-size:64px"></i>
</body>
</html>
Try It Yourself » 
Pour une liste complète des icônes: Visitez notre référence icône
Google Material Design Icons
domicile
domicile
domicile
le menu
le menu
le 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
local_shipping
local_shipping
local_shipping
local_airport
local_airport
local_airport
Exemple
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">cloud</i>
<i class="material-icons w3-large">cloud</i>
<i
class="material-icons w3-xlarge">cloud</i>
<i class="material-icons
w3-xxlarge">cloud</i>
<i class="material-icons w3-xxxlarge">cloud</i>
<i
class="material-icons w3-text-teal" style="font-size:64px">cloud</i>
</body>
</html>
Try It Yourself » bootstrap Icons
domicile
menu hamburgers
arrow_back
arrow_forward
chercher
retirer
rafraîchir
poubelle
utilisateur
fichier
impression
avion
Exemple
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon
glyphicon-cloud"></i>
<i class="glyphicon glyphicon-cloud w3-large"></i>
<i class="glyphicon glyphicon-cloud w3-xlarge"></i>
<i class="glyphicon
glyphicon-cloud w3-xxlarge"></i>
<i class="glyphicon glyphicon-cloud
w3-xxxlarge"></i>
<i class="glyphicon glyphicon-cloud w3-text-teal"
style="font-size:64px"></i>
</body>
</html>
Try It Yourself »