Как работают иконки Materialize?

Question

Есть два способа использования Materilize Icon:

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

<i class="mdi-action-settings"></i> Я понимаю, как работает этот метод первым. Это работает как CSS определено ниже:

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

Теперь мой вопрос, как второй метод <i class="material-icons">settings</i> работает?

Вот URL, чтобы увидеть Materialize Icons

Answer 1

Это то, что называется лигатуры. Взгляните на страницу this, в которой объясняется, как включить их в CSS.

Короче говоря, если вы включите его, вы скажете браузеру искать комбинации букв, которые должны отображаться по-другому. Пример показан here. Некоторые специальные шрифты (например, в materializecss или те, которые вы создаете в icomoon.io) просто используют эту функцию со словами, чтобы отображать значки вместо комбинированных букв. Если браузер не может обрабатывать лигатуры, он грациозно возвращается к буквальному слову, а не к пустому пространству.