Agregar Google material icons fonts en HTML
Una manera de agregar iconos a tu sitio web en HTML es utilizando los icons fonts material de Google, sin agregar más archivos a tu sitio.
Material icons son símbolos para representar acciones o elementos comunes en las diversas tecnologías como Android, iOS y web.
Si has llegado a este tema es probable que al navegar por internet o en apps te has encontrado con iconos como estos.
Estos iconos son fuentes especiales que al colocar ciertas etiquetas HTML muestran una imagen.
Agregar material icons font en HTML
Para utilizar este tipo de iconos en nuestra página HTML es necesario agregar el link a los css.
Agrega la siguiente línea en el encabezado de tu página web sin realizar ningún cambio.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Una vez que lo agregamos podemos agregar cualquiera de los iconos listados en la documentación oficial.
Podría interesarte Agregar JQuery a un proyecto web
Para poder agregar uno de los iconos a nuestro HTML da clic encima de alguno, en la parte inferior izquierda aparecerán las opciones de la selección.
Expande la lista de opciones, podemos descargar la imagen como una imagen png o un archivo svg.
Sin embargo, no necesitaremos ninguna de las dos opciones para nuestra web, nos enfocaremos en la sección del buscador.
Copiaremos las etiquetas para los buscadores modernos y lo pegamos a la pagina HTML que anteriormente le agregamos el enlace CSS.
Por lo tanto, todo el código quedaría de la siguiente manera.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<h1>Iconos <i class="material-icons">home</i></h1>
<br>
<i class="material-icons">settings</i>
<i class="material-icons">create</i>
<i class="material-icons">mail</i>
<i class="material-icons">save</i>
</body>
</html>En mi caso agregue más de un icono para visualizar mejor los ejemplos, ejecutemos el archivo HTML en el buscador.
Podría interesarte Agregar Bootstrap a un proyecto web
Puedes personalizar los iconos de acuerdo tu sitio cambiando algunas propiedades como:
- Tamaño de fuente
- Color
- Efectos
- Animaciones
Recuerda que son fuentes, por lo tanto, puedes agregarle toda esa personalización mediante css o javascript.
he querido añadirlos a mi blog pero la sintaxis al usar el html es diferente…
así es como nos dice google: settings o face
pero en mi blog es así:
como puedes ver, actualmente hay otros íconos también instalados, entonces lo puse así:
pero queda invisible, no sé si está interfiriendo en el css