В CSS/JavaScript, как реализован этот плагин значок/шрифт?

Демо на Jsfiddle

<link href="#" onclick="location.href='https://fonts.googleapis.com/icon?family=Material+Icons'; return false;" rel="stylesheet">
<link rel="stylesheet" href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css'; return false;">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>

<i class="material-icons">add</i>
<i class="material-icons">replay</i>

Ответ 1

Это "трюк", где значки реализованы как составленные глифы шрифта. Это означает, что комбинации букв "добавить" и "повтор" отображаются как один символ в шрифте, подобно тому, как "fi" и "fl" часто представлены как один символ во многих шрифтах. (См. эту статью в Википедии для получения дополнительной информации.) Значки, следовательно, не связаны с объявлениями CSS.

Вы можете увидеть, как это работает, если вы примените шрифт к полю ввода: если вы начнете печатать случайно, вы ничего не увидите, потому что отдельные символы не имеют назначенного им символа, но если вы наберете "add" вы увидите символ +.

<link href="#" onclick="location.href='https://fonts.googleapis.com/icon?family=Material+Icons'; return false;" rel="stylesheet">

<textarea class="material-icons">add remove replay</textarea>