librerías de iconos
Con W3.CSS se puede utilizar cualquier biblioteca de iconos como:
- Los iconos impresionantes de fuente
- Google Iconos de materiales
- Los iconos de archivos de inicio
Uso de iconos
Para utilizar un icono, basta con añadir el nombre del icono a la clase de una etiqueta HTML <i> elemento.
Para controlar el tamaño del icono, cambiar la propiedad font-tamaño del icono, o utilizar las clases de tamaño w3-:
- W3-tiny
- w3-pequeña
- w3 a gran
- W3-Xxlarge
- W3-XXXLarge
Los iconos impresionantes de fuente
fa fa-casa
fa fa-bares
fa fa-flecha-izquierda
fa fa-flecha derecha
fa fa-búsqueda
fa fa-cerca
fa fa-refresh
fa fa-basura
fa fa-macho
fa fa-coche
fa fa-camión
fa fa-avión
Ejemplo
<!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>
Inténtalo tú mismo " 
Para obtener una lista completa de los iconos: Visita nuestra referencia de los iconos
Google material de diseño de iconos
casa
casa
casa
menú
menú
menú
arrow_back
arrow_back
arrow_back
arrow_forward
arrow_forward
arrow_forward
buscar
buscar
buscar
cerca
cerca
cerca
refrescar
refrescar
refrescar
borrar
borrar
borrar
persona
persona
persona
directions_car
directions_car
directions_car
local_shipping
local_shipping
local_shipping
local_airport
local_airport
local_airport
Ejemplo
<!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>
Inténtalo tú mismo " Los iconos de archivos de inicio
casa
-menú de hamburguesa
arrow_back
arrow_forward
buscar
retirar
refrescar
basura
usuario
archivo
impresión
avión
Ejemplo
<!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>
Inténtalo tú mismo "