Iconos CSS

Tabla de contenido

    Mostrar tabla de contenidos

Se pueden agregar fácilmente íconos a su página HTML mediante el uso de una biblioteca de íconos.

Cómo agregar iconos

La forma más sencilla de agregar un ícono a su página HTML es con una biblioteca de íconos. como Font Awesome.

Agregue el nombre de la clase de icono especificada a cualquier elemento HTML en línea (como <i> o <span>).

Todos los íconos en las bibliotecas de íconos a continuación son vectores escalables que pueden personalizarse con CSS (tamaño, color, sombra, etc.)

Iconos impresionantes de fuentes

Para usar los íconos de Font Awesome, vaya a fontawesome.com, inicia sesión y obtén un código para agregar en la sección <head> de tu página HTML:

<script; src="https://kit.fontawesome.com/tu código.js" crossorigin="anonymous"></script>

Lea más sobre cómo comenzar con Font Awesome en nuestro Fuente Impresionantes 5 tutoriales.

Nota: ¡No se requiere descarga ni instalación!

Ejemplo

<!DOCTYPE html>
<html>
<head>
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i  class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

</body>
</html>

Resultado :

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>

<h1>Font Awesome icon library</h1>

<p>Some Font Awesome icons:</p>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

<p>Styled Font Awesome icons (size and color):</p>
<i class="fas fa-cloud" style="font-size:24px;"></i>
<i class="fas fa-cloud" style="font-size:36px;"></i>
<i class="fas fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fas fa-cloud" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

Para obtener una referencia completa de todos los íconos de Font Awesome, visite nuestra Referencia de íconos.

Iconos de arranque

Para usar los glifos de Bootstrap, agregue la siguiente línea dentro de la sección <head> de su página HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Nota: ¡No se requiere descarga ni instalación!

Ejemplo

 <!DOCTYPE html>
<html>
<head>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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>

Resultado :

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body class="container">

<h1>Bootstrap icon library</h1>

<p>Some Bootstrap icons:</p>
<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>
<br><br>

<p>Styled Bootstrap icons (size and color):</p>
<i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

Iconos de Google

Para usar los íconos de Google, agregue la siguiente línea dentro de la sección <head> de su página HTML:

Nota: ¡No se requiere descarga ni 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>

Resultado :

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<title>Google Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<h1>Google icon library</h1>

<p>Some Google icons:</p>
<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>
<br><br>

<p>Styled Google icons (size and color):</p>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>

</body>
</html>

Para obtener una lista completa de todos los íconos, visite nuestro Tutorial de iconos.