Para insertar un icono, agregue el nombre de la clase de icono a cualquier elemento HTML en línea.
Los elementos <i> y <span> son ampliamente utilizados para agregar iconos.
Todos los íconos en las bibliotecas de íconos a continuación son íconos vectoriales escalables que se pueden personalizar con CSS (tamaño, color, sombra, etc.)
Font Awesome 5 Icons
Para usar los íconos gratuitos de Font Awesome 5, vaya a fontawesome.com e inicie sesión para obtener un código para usar en sus páginas web.
Lea más acerca de cómo comenzar con Font Awesome en nuestro capítulo Font Awesome 5 .
Nota: ¡No se requiere descarga ni instalación!
Ejemplo
<html>
<head>
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous">
/script>
<!--Get your code at fontawesome.com-->
</head>
<body>
<i class="fas fa-band-aid"></i>
<i class="fas fa-cat"></i>
<i class="fas fa-dragon"></i>
<i class="far fa-clock"></i>
<i class="fas fa-clock"></i>
</html>
Font Awesome 4 Icons
Para usar los íconos de Font Awesome 4, agregue la siguiente línea dentro de la <head>sección de su página HTML:
Nota: ¡No se requiere descarga ni instalación!
Ejemplo
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.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>
Bootstrap 3 iconos
Para usar los glyphicons de Bootstrap 3, agregue la siguiente línea dentro de la <head>sección de su página HTML:
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>
Nota: los Glyphicons no son compatibles con Bootstrap 4.
Para obtener más información sobre Bootstrap 3 y Glyphicons.
Google Icons
Para usar los íconos de Google, agregue la siguiente línea dentro de la <head>sección de su página HTML:
Nota: ¡No se requiere descarga ni instalación!
Ejemplo
<!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>
<h3>Google icon library</h3>
<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 (fuente impresionante, bootstrap y google), visite la Referencia de íconos .
Resultado
Cómo agregar iconos
Google icon library
Some Google icons:
cloud favorite attachment computer trafficStyled Google icons (size and color):
cloud cloud cloud cloudhttps://www.w3schools.com/icons/icons_reference.asp