Iconos W3.CSS
Bibliotecas de iconos
Con W3.CSS puede usar la biblioteca de iconos que desee, como:
- Iconos impresionantes de fuentes
- Iconos de diseño de materiales de Google
- Iconos de arranque
Uso de una biblioteca de iconos
Para insertar un icono:
- Incluya la biblioteca de iconos de una CDN (Content Delivery Network) en la sección <head>.
- Agregue el nombre de la clase de icono a cualquier elemento HTML en línea.
Sugerencia: los elementos <i> y <span> se usan ampliamente para agregar íconos.
Para controlar el tamaño del ícono, cambie la propiedad de tamaño de fuente del ícono o use una de las clases de tamaño w3 :
- w3-pequeño
- w3-pequeño
- w3-grande
- w3-xxgrande
- w3-xxxgrande
- w3-jumbo
Algunos iconos impresionantes de fuentes
hace fa-hombre
fa fa-bars
fa fa-flecha izquierda
fa fa-flecha-derecha
fa fa-búsqueda
fa fa-cerrar
fa fa-actualizar
fa fa-basura
duele
fa fa-coche
fa fa-truck
fa fa-avion
Ejemplo
<!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>
Para obtener una lista completa de íconos: Visite nuestra referencia de íconos
Algunos íconos de diseño de materiales de Google
casa
casa
casa
menú
menú
menú
flecha_atrás
flecha_atrás
flecha_atrás
flecha_adelante
flecha_adelante
flecha_adelante
búsqueda
búsqueda
búsqueda
cerca
cerca
cerca
actualizar
actualizar
actualizar
Eliminar
Eliminar
Eliminar
persona
persona
persona
direcciones_coche
direcciones_coche
direcciones_coche
envío_local
envío_local
envío_local
aeropuerto_local
aeropuerto_local
aeropuerto_local
Ejemplo
<!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>
Algunos iconos de Bootstrap
casa
menú hamburguesa
flecha_atrás
flecha_adelante
búsqueda
retirar
actualizar
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="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>