La forma más sencilla de configurar las fuentes de íconos para usarlas en cualquier página web es mediante Google Fonts. Lo único que debes hacer es incluir una sola línea de HTML:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
Al igual que otras fuentes web de Google, se publicará el CSS correcto para activar la fuente específica del navegador. Se declarará una clase de CSS adicional llamada .material-icons. Cualquier elemento que use esta clase tendrá el CSS correcto para renderizar estos íconos desde la fuente web.
Es muy fácil incorporar íconos a tu página web. Este es un ejemplo pequeño:
rostro
<span class="material-icons">face</span> |
En este ejemplo, se usa una función tipográfica llamada ligaduras, que permite renderizar un glifo de ícono mediante su nombre textual. El navegador web realiza el reemplazo de forma automática y proporciona un código más legible que la referencia equivalente de caracteres numéricos.
Esta función es compatible con la mayoría de los navegadores actualizados en computadoras de escritorio y dispositivos móviles.
Para los navegadores que no admiten ligaduras, recurre a la especificación de íconos mediante referencias numéricas de caracteres, como en el siguiente ejemplo:
<span class="material-icons"></span> |
Estos íconos se diseñaron para cumplir con los lineamientos de material design, y se ven mejor cuando se usan los tamaños y colores de íconos recomendados. Los siguientes estilos facilitan la aplicación de nuestros tamaños, colores y estados de actividad recomendados.
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
Aunque los íconos de la fuente se pueden ajustar a cualquier tamaño, de acuerdo con los lineamientos de íconos de material design, recomendamos que se muestren en 18, 24, 36 o 48 píxeles. El tamaño predeterminado es de 24 px.
Reglas de CSS para los lineamientos de tamaño estándar de Material Design:
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
Los íconos de material se ven mejor en 24 px, pero si un ícono debe mostrarse en un tamaño alternativo, usar las reglas de CSS anteriores puede ser útil:
18px |
<span class="material-icons md-18">face</span> |
24px |
<span class="material-icons md-24">face</span> |
36px |
<span class="material-icons md-36">face</span> |
48px |
<span class="material-icons md-48">face</span> |
La fuente del ícono permite darle estilo fácilmente a un ícono de cualquier color. Según los lineamientos para íconos de material design, te recomendamos que uses íconos negros con una opacidad del 54% o blancos con una opacidad del 100% cuando uses estos íconos en fondos claros u oscuros, respectivamente. Si los íconos están inhabilitados o inactivos, usa negro al 26% o blanco al 30% para fondos claros y oscuros, respectivamente.
A continuación, se incluyen algunos ejemplos en los que se usan los estilos de CSS de material descritos con anterioridad:
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
Ejemplo para dibujar un ícono sobre un fondo claro con un color oscuro de primer plano:
Normal |
<span class="material-icons md-dark">face</span> |
Inhabilitada |
<span class="material-icons md-dark md-inactive">face</span> |
Ejemplo para dibujar un ícono sobre un fondo oscuro con un color de primer plano claro:
Normal |
<span class="material-icons md-light">face</span> |
Inhabilitada |
<span class="material-icons md-light md-inactive">face</span> |
Para establecer un color de ícono personalizado, define una regla de CSS que especifique el color deseado para la fuente:
.material-icons.orange600 { color: #FB8C00; }
Luego, usa la clase para referirte al ícono:
Normal |
<span class="material-icons orange600">face</span> |
Los íconos de material también están disponibles como imágenes normales, tanto en formato PNG como SVG.
Los íconos de material se proporcionan como SVG adecuados para proyectos web. Los íconos individuales se pueden descargar desde la biblioteca de íconos de material. Los SVG también están disponibles en los íconos de material design del repositorio de Git en la ruta:
material-design-icons/src/
Por ejemplo, los íconos de mapa están en src/maps:
material-design-icons/src/maps/
Si se usan varios íconos en un sitio web, se recomienda crear hojas de objetos con las imágenes. Para obtener más información, consulta la documentación en el directorio de objetos del repositorio de git.
PNG es la forma más tradicional de mostrar íconos en la Web. Nuestras descargas de la biblioteca de íconos de material proporcionan densidades de uno y dobles para cada ícono. Se denominan 1x y 2x, respectivamente en la descarga. Los íconos también están disponibles en el repositorio de Git en:
material-design-icons/png/
Si se usan varios íconos en un sitio web, se recomienda crear hojas de objetos con las imágenes. Para obtener más información, consulta las recomendaciones en el directorio de objetos del repositorio de git.
Te recomendamos usar el siguiente artículo como manual para la escritura de derecha a izquierda en la Web:
https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1
https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2
De forma predeterminada, en la Web, los íconos no se duplican cuando se duplica la dirección del diseño. Cuando sea necesario, deberá reflejar los íconos apropiados.
En el siguiente ejemplo, se muestra cómo implementar una regla de CSS de derecha a izquierda simple. También puedes verlo en el codelab.
página.html
<html dir="rtl">
<img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>
página.css
html[dir="rtl"] .icon {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}