Основные иконки
Чтобы использовать значки Google, добавьте следующую строку внутри <head> раздел вашей HTML страницы:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Примечание: Ни одна загрузка или установка не требуется!
Добавьте material-icons класс строковый элемент и вставить имя значка:
пример
Следующий код:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons"
style="font-size:48px;">cloud</i>
<i class="material-icons"
style="font-size:60px;color:red;">cloud</i>
</body>
</html>
Результаты в:
cloud
cloud
cloud Попробуй сам " Google иконки предназначены для использования с строчными элементами. <i> и <span> элементы широко используются для иконок.
Примечание: Материал значки 24px по умолчанию.
Также обратите внимание, что если вы измените цвет контейнера значка, цвет значка меняется тоже. То же самое относится и к вещи, тени, и все остальное, что получает в наследство с помощью CSS. Исключением является CSS свойство размера шрифта, который всегда 24px, если что-то другое не указано.
Иконки Значительные
Хотя материал иконки можно масштабировать до любого размера, рекомендуемый размер шрифта либо 18, 24, 36 или 48px:
пример
Следующий код:
<style>
/* Rules for icon sizes: */
.material-icons.md-18 { font-size:
18px; }
.material-icons.md-24 { font-size:
24px; } /* Default */
.material-icons.md-36 { font-size:
36px; }
.material-icons.md-48 { font-size:
48px; }
</style>
<i class="material-icons md-18">cloud</i>
<i class="material-icons
md-24">cloud</i>
<i class="material-icons md-36">cloud</i>
<i class="material-icons
md-48">cloud</i>Результаты в:
cloud
cloud
cloud
cloud
Попробуй сам "