Шрифт Awesome

Включите Font Awesome в свой проект:
Добавьте эту строку в

Использовать значок

Чтобы использовать значок, добавьте элемент или с соответствующими классами:

Значки материалов

Включите значки материалов в свой проект:
Добавьте эту строку в

Использовать значок

Чтобы использовать значок, добавьте элемент с классом Material-icons и именем значка:

camera_alt

2. Использование CSS для пользовательских значков

Вы также можете создавать свои собственные значки с помощью CSS. Вот простой пример использования чистого CSS:

Создайте базовую структуру HTML

Добавьте CSS для оформления значка

.icon-star {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    position: relative;
    transform: rotate(35deg);
}


.icon-star:before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    transform: rotate(-70deg);
}

Этот фрагмент CSS создает простую звезду с использованием границ и позиционирования.

3. SVG-иконки

Вы также можете использовать SVG для создания высококачественных значков:

Встроенный SVG

Использование SVG в качестве фонового изображения

.icon {
    width: 24px;
    height: 24px;
    background: url('data:image/svg xml;base64,...') no-repeat center center;
    background-size: contain;
}

Советы

Размер и цвет: для значков шрифтов и встроенных файлов SVG вы можете настроить размер с помощью свойств шрифта или ширины и высоты, а также изменить цвет с помощью цвета или заливки для SVG.
Доступность: всегда учитывайте доступность, добавляя при необходимости описательный текст или атрибуты aria.
Не стесняйтесь экспериментировать и комбинировать разные методы, чтобы найти тот, который лучше всего подойдет для вашего проекта!