Jak działają ikony Materialise?

Question

Istnieją dwa sposoby korzystania Materilize ikoną:

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

<i class="mdi-action-settings"></i> mogę zrozumieć, jak działa ta pierwsza metoda. To działa jak css jest zdefiniowany poniżej:

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

Teraz moje pytanie jest jak drugi sposób <i class="material-icons">settings</i> działa?

Oto URL, aby zobaczyć Materialize Icons

Answer 1

To jest coś, co nazywa ligatur. Spójrz na stronę this wyjaśniającą, jak włączyć je w CSS.

Krótko mówiąc, jeśli włączysz tę funkcję, powiedz przeglądarce, aby szukała kombinacji liter, które powinny być renderowane w inny sposób. Przykład pokazano here. Niektóre specjalne czcionki (jak w materializecss lub te, które tworzysz w icomoon.io) po prostu użyj tej funkcji ze słowami, aby renderować ikony zamiast połączonych liter. Jeśli przeglądarka nie obsługuje ligatur, to z wdziękiem powraca do literalnego słowa zamiast pustego miejsca.