Cómo agregar iconos
Para insertar un icono, añadir el nombre de la clase icono a cualquier elemento HTML en línea.
El <i>
y <span>
elementos son ampliamente utilizados para añadir iconos.
Todos los iconos en las librerías de iconos abajo, son iconos vectoriales escalables que pueden ser personalizados con CSS (size, color, shadow, etc.)
Los iconos impresionantes de fuente
Para utilizar los iconos impresionantes fuente, añadir la siguiente línea dentro de la <head>
sección de su página HTML:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
Nota: No se requiere ninguna descarga o instalación!
Ejemplo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.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>
Inténtalo tú mismo " Los iconos de archivos de inicio
Para utilizar las glyphicons archivos de inicio, agregue la siguiente línea dentro del <head>
sección de su página HTML:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Nota: No se requiere ninguna descarga o instalación!
Ejemplo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/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>
Inténtalo tú mismo " Iconos de Google
Para utilizar los iconos de Google, añada la siguiente línea dentro del <head>
sección de su página HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Nota: No se requiere ninguna descarga o instalación!
Ejemplo
<!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>
Inténtalo tú mismo " Para obtener una lista completa de todos los iconos de fuente impresionante, visitar la fuente impresionante icono de referencia .
Para obtener una lista completa de todos los archivos de inicio Glyphicons, visite la referencia Bootstrap Glyphicon .
Para obtener una lista completa de todos los iconos de Google, visite la referencia de los iconos Google .