«Значки материалов CSS» — это фраза на английском языке. Это относится к использованию CSS (каскадных таблиц стилей) для включения и стилизации значков материалов, которые представляют собой популярный набор масштабируемых векторных значков, предоставляемый Google. Вот несколько методов, которые вы можете использовать для реализации CSS значков материалов:
-
Ссылка CDN. Самый простой способ использовать CSS-значки материалов — включить ссылку CDN (сеть доставки контента) в ваш HTML-файл. Добавьте следующую строку в раздел
вашего HTML-документа:<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">При этом будет получен CSS-файл Material Icons с серверов Google и применены необходимые стили для отображения значков.
-
Локальная копия. Если вы предпочитаете разместить CSS-файл Material Icons на своем собственном сервере, вы можете загрузить его с веб-сайта Google Fonts ( https://fonts.google.com/icons ) и включить в свой проект. Сохраните файл CSS и свяжите его с HTML-файлом с помощью тега
, аналогично методу CDN. -
Пакет NPM. Если вы используете в своем проекте такой менеджер пакетов, как npm (Node Package Manager), вы можете установить пакет Material Icons и импортировать его в файлы CSS или JavaScript. Используйте следующую команду для установки пакета:
npm install material-iconsЗатем вы можете импортировать CSS-код значков материалов в файл проекта:
import 'material-icons/iconfont/material-icons.css'; -
Настройка: значки материалов CSS предоставляет различные классы для применения к значкам разных стилей и размеров. Вы можете использовать эти классы в своих HTML-элементах для управления внешним видом значков. Например, чтобы отобразить большой значок красного сердца, вы можете использовать следующий код:
<i class="material-icons md-48" >favorite</i>В этом примере класс
md-48устанавливает размер 48 пикселей, а встроенный стиль устанавливает красный цвет.