Icono de pérdida de peso
– Una de las cosas más importantes que hay que recordar al diseñar iconos es que tienen que funcionar juntos. Tienen que relacionarse entre sí de forma visual y física. Uno de los aspectos más importantes de la relación entre iconos es su peso visual. Tomemos este conjunto de pseudo iconos que tengo aquí. Aunque tienen las mismas dimensiones de anchura y altura, estos iconos no están equilibrados visualmente en absoluto. El peso visual del cuadrado, por ejemplo, es mucho mayor que el de la estrella, simplemente porque hay mucho más espacio negativo en la estrella, aunque tengan las mismas dimensiones. Así que, para equilibrar estos iconos, tengo que tener en cuenta no sólo su anchura y altura, sino también cómo se relacionan entre sí. Por eso el tamaño de los iconos no suele ser una ciencia exacta, aunque tengas algunas guías a las que atenerte y algunos estándares de diseño en cuanto a su tamaño, los elementos individuales de diseño y los componentes de tu icono…
Icono de levantamiento de pesas
Transmitir una metáfora en una cuadrícula de 16 × 16px es mucho pedir a esos 256 píxeles. Mientras que algunos conceptos, como la búsqueda o la visibilidad, se representan fácilmente, otros, como el peso o los problemas, pueden resultar más difíciles. Aunque el detalle por sí solo no es el remedio para todos los males de las metáforas, puede ayudar mucho y ofrece más espacio para la exploración.
A 16px, la mayoría de las fuentes sans-serif de peso normal miden ~1,5px. Utilizamos 14px para la mayor parte de nuestro texto de interfaz de usuario, por lo que la diferencia entre el peso del icono y el texto es mayor hoy en día. El peso actual de nuestros iconos es más parecido al de una fuente en negrita, pero debido al tamaño relativo de cada icono con respecto al texto, puede sobrecargar el texto.
Entonces, ¿por qué no un peso de 1px? Simplemente puede ser demasiado ligero y puede ser problemático con una cuadrícula uniforme – para centrar un elemento de 1px en una cuadrícula de 16px tiene que estar en medio píxel. Alternativamente, encontrarás que muchos iconos que usan 1px en una cuadrícula par tienen un píxel extra de espacio en uno o más bordes para que el píxel pueda ser nítido, pero ahora tienes un problema potencial de alineación.
En la actualización más reciente de la biblioteca de iconos se eligió 2px como peso del trazo. Esto tiene razones históricas de diseño, pero también funciona bien para tener píxeles nítidos (que no sean curvas o esquinas redondeadas) en cualquier pantalla.
Icono de peso libre
Este ejemplo utiliza una característica tipográfica llamada ligaduras, que permite la representación de un glifo icono simplemente utilizando su nombre textual. La sustitución la realiza automáticamente el navegador web y proporciona un código más legible que la referencia numérica de caracteres equivalente.
Para encontrar los nombres de los iconos y los puntos de código en la biblioteca de iconos de material, seleccione cualquier icono y abra el panel de fuentes de iconos. Cada fuente de iconos tiene un índice de codepuntos en nuestro repositorio git que muestra el conjunto completo de nombres y códigos de caracteres (aquí).
Estos iconos se diseñaron siguiendo las directrices de diseño de materiales y se ven mejor cuando se utilizan los tamaños y colores de icono recomendados. Los estilos siguientes facilitan la aplicación de los tamaños, colores y estados de actividad recomendados.
El uso de la fuente de iconos permite estilizar fácilmente un icono en cualquier color. De acuerdo con las directrices sobre iconos del Material Design, para los iconos activos recomendamos utilizar negro con una opacidad del 54% o blanco con una opacidad del 100% cuando se muestren sobre fondos claros u oscuros, respectivamente. Si un icono está desactivado o inactivo, utilice negro al 26% o blanco al 30% para fondos claros y oscuros, respectivamente.
Icono de escala
Este truco no se comporta igual que la negrita real, ya que no cambia el tamaño del carácter. Dado que font-weight cambia el flujo del texto, debería evitarse en hover, ya que el texto podría desplazarse o incluso enrollarse al pasar el ratón por encima.
Si desea aplicar el estilo hover a un elemento, indica que probablemente tiene alguna interacción vinculada a él. Los elementos interactivos deben cumplir varios criterios para que puedan ser utilizados por personas con discapacidad o aficionados al teclado:
Normalmente cuando pones algo en negrita con font-weight el navegador no hará la fuente un poco más grande. NO sustituirá toda la fuente por otra similar. Por ejemplo: Aria a Aria Bold. Una fuente de alta calidad debería tener al menos 3 o mejor 6 versiones (Ligera, Normal, Negrita x cursiva, no cursiva).
Entonces, ¿cómo debe su letra icono debe parecer negrita o la luz? ¿Por qué funcionaba en la versión anterior de bootstrap? Realmente no lo sé. Tal vez algunos ajustes internos de la fuente o css decleration. Pero uno es seguro: Usted no debe utilizar esta regla para los iconos (que no los apoyan, FontAwesome lo apoya por cierto.).
