css - examples - materialize input

¿Cómo funcionan los iconos de Materialize?

Question

Esta pregunta ya tiene una respuesta aquí:

• En CSS / JavaScript, ¿cómo se implementa este complemento de icono / fuente? 1 respuesta

Hay dos formas de usar el icono de materialización:

1. <i class="mdi-action-settings"></i>
2. <i class="material-icons">settings</i>

<i class="mdi-action-settings"></i> Entiendo cómo funciona este primer método. Esto funciona como css se define a continuación:

.mdi-action-settings:before {
    content: "/e672";
}

Ahora mi pregunta es cómo funciona el segundo método <i class="material-icons">settings</i> ?

Aquí está la URL para ver los iconos de Materialise

Answer 1

Esto es algo que se llama ligaduras. Eche un vistazo a esta página que explica cómo habilitarlos en CSS.

Para resumir, si lo habilitas, le dices al navegador que busque combinaciones de letras que deberían mostrarse de otra manera. Un ejemplo se muestra aquí . Algunas fuentes especiales (como en materializecss o las que usted crea en icomoon.io) solo usan esta característica con palabras para representar íconos en lugar de letras combinadas. Si el navegador no puede manejar ligaduras, regresa con gracia a la palabra literal, en lugar de a un espacio vacío.