Как сделать иконки в html css

Существует несколько способов создания иконок в HTML и CSS. Рассмотрим несколько наиболее популярных способов:

1. Использование файлов изображений. Создайте иконки в любом графическом редакторе и экспортируйте их в формате PNG, SVG или другом подходящем для ваших нужд формате. Затем добавьте их на страницу с помощью тега <img> или CSS свойства background-image.

Пример:

<img src="icon.png" alt="иконка">

или

<div class="icon"></div>

.icon {
  background-image: url("icon.png");
  width: 16px;
  height: 16px;
}

2. Использование шрифтов иконок. Это позволяет использовать символы, представляющие различные иконки, как буквы в тексте. Для этого нужно использовать специальный шрифт, который содержит символы иконок. Некоторые известные шрифты иконок — это Font Awesome, Material Icons или Glyphicons.

Пример:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />

<i class="fas fa-user"></i>

или

<span class="material-icons">
  home
</span>

3. Использование CSS свойств для создания графических иконок. Это может включать создание кругов или квадратов с задним фоном, рисование иконки с помощью CSS свойства border, box-shadow или transform.

Пример:

<div class="circle-icon"></div>

.circle-icon {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  border-radius: 50%;
}

Независимо от того, какой способ вы выберете, важно выбрать подходящий для вашей задачи способ создания иконок и сделать их адаптивными, чтобы они корректно отображались на различных устройствах.