Se pueden agregar iconos a nuestra página HTML desde la biblioteca de iconos. Todos los íconos en la biblioteca se pueden formatear usando CSS. Se pueden personalizar según el tamaño, el color, la sombra, etc. Desempeñan un papel importante en la materialización de CSS. Materialise CSS proporciona un amplio conjunto de íconos de materiales de Google que se pueden descargar desde las especificaciones de Material Design .
Biblioteca y uso: para usar estos íconos, se agrega la siguiente línea en la parte <head> del código HTML.
HTML
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Luego, para usar los íconos, el nombre del ícono se proporciona en la parte <i> del elemento HTML.
<i class="material-icons">add</i>
Para obtener más información sobre materializar CSS, siga el siguiente artículo:
Materializar íconos CSS En este artículo, aprenderemos cómo usar estos íconos como un estilo de lista.
- En primer lugar, eliminaremos el estilo de lista predeterminado configurando list-style-type en none .
HTML
<style>ul{list-style-type: none;}</style>
- Luego usaremos el estilo li:before para agregar contenido antes del valor de la lista y agregar íconos de material como contenido.
HTML
<style>li:before{content: 'arrow_right';font-family: 'Material Icons';}</style>
Este estilo agregará el ícono de la flecha hacia la derecha a todos los contenidos de la lista.
Código definitivo:
HTML
<!DOCTYPE>
<html>
<head>
<!-- Google Material Icon Script -->
<link
rel="stylesheet" href=
"https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
/* Removing the list style of list gfg */
.gfg{
list-style-type:none;
}
/* Adding icon before each list icon */
.gfg > li:before{
content: 'arrow_right';
font-family: 'Material Icons';
font-size: 25px;
vertical-align: -30%;
}
</style>
</head>
<body>
<center>
<h1 style="color:forestgreen;">
GeeksForGeeks
</h1>
</center>
<!-- This is a list with bullet style -->
<h3 style="color:crimson;">
List with bullet style:
</h3>
<ul style="color:dodgerblue;">
<li>Geek 1</li>
<li>Geek 2</li>
<li>Geek 3</li>
</ul>
<!-- This is the list with icon as its style -->
<h3 style="color:crimson;">
List with icon as style:
</h3>
<ul class="gfg" style="color:dodgerblue;">
<li>Geek 1</li>
<li>Geek 2</li>
<li>Geek 3</li>
</ul>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA