Методы использования значков материалов CSS: CDN, локальная копия, пакет NPM и настройка

«Значки материалов CSS» — это фраза на английском языке. Это относится к использованию CSS (каскадных таблиц стилей) для включения и стилизации значков материалов, которые представляют собой популярный набор масштабируемых векторных значков, предоставляемый Google. Вот несколько методов, которые вы можете использовать для реализации CSS значков материалов:

  1. Ссылка CDN. Самый простой способ использовать CSS-значки материалов — включить ссылку CDN (сеть доставки контента) в ваш HTML-файл. Добавьте следующую строку в раздел вашего HTML-документа:

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    При этом будет получен CSS-файл Material Icons с серверов Google и применены необходимые стили для отображения значков.

  2. Локальная копия. Если вы предпочитаете разместить CSS-файл Material Icons на своем собственном сервере, вы можете загрузить его с веб-сайта Google Fonts ( https://fonts.google.com/icons ) и включить в свой проект. Сохраните файл CSS и свяжите его с HTML-файлом с помощью тега , аналогично методу CDN.

  3. Пакет NPM. Если вы используете в своем проекте такой менеджер пакетов, как npm (Node Package Manager), вы можете установить пакет Material Icons и импортировать его в файлы CSS или JavaScript. Используйте следующую команду для установки пакета:

    npm install material-icons

    Затем вы можете импортировать CSS-код значков материалов в файл проекта:

    import 'material-icons/iconfont/material-icons.css';
  4. Настройка: значки материалов CSS предоставляет различные классы для применения к значкам разных стилей и размеров. Вы можете использовать эти классы в своих HTML-элементах для управления внешним видом значков. Например, чтобы отобразить большой значок красного сердца, вы можете использовать следующий код:

    <i class="material-icons md-48" >favorite</i>

    В этом примере класс md-48устанавливает размер 48 пикселей, а встроенный стиль устанавливает красный цвет.