Foro | Los últimos tutoriales de desarrollo web
 

Icons Tutorial



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 .