Урок 12
День 12 | Работа с иконками
35 минСпособы добавления иконок
Есть несколько способов добавить иконки на сайт. Каждый имеет свои преимущества.
Способ 1: Font Awesome (самый популярный)
Font Awesome — это библиотека иконок, которая использует шрифты. Очень популярна и проста в использовании.
Подключение через CDN
<!-- В <head> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">Подключение через npm (для проектов на Vite)
# Установка
npm install @fortawesome/fontawesome-free// В main.js
import '@fortawesome/fontawesome-free/css/all.min.css';Это лучший способ для продакшена — иконки будут частью вашего бандла и не зависят от внешних CDN.
Использование
<!-- Иконка через класс -->
<i class="fas fa-home"></i>
<i class="fas fa-user"></i>
<i class="fas fa-envelope"></i>
<!-- В кнопке -->
<button>
<i class="fas fa-search"></i>
Поиск
</button>
<!-- В ссылке -->
<a href="#">
<i class="fab fa-facebook"></i>
Facebook
</a>Классы Font Awesome:
fas— Solid (сплошные иконки)far— Regular (обычные)fab— Brands (бренды: Facebook, Twitter и т.д.)
Преимущества Font Awesome:
- ✅ Огромная библиотека иконок (тысячи)
- ✅ Легко использовать (просто класс)
- ✅ Масштабируется без потери качества
- ✅ Легко менять цвет через CSS
Недостатки:
- ❌ Загружает весь шрифт (даже если используете 5 иконок)
- ❌ Зависимость от CDN (или нужно скачивать)
Способ 2: SVG иконки (рекомендуется)
SVG иконки — это векторные изображения. Более гибкие и производительные.
Встроенные SVG
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" fill="currentColor"/>
<path d="M2 17L12 22L22 17V12L12 17L2 12V17Z" fill="currentColor"/>
</svg>Преимущества:
- ✅ Не загружает лишние иконки
- ✅ Можно стилизовать через CSS
- ✅ Маленький размер
- ✅ Масштабируется без потери качества
SVG через <img>
<img src="icon.svg" alt="Иконка">Просто, но нельзя стилизовать цвет через CSS.
SVG через background
.icon {
width: 24px;
height: 24px;
background-image: url("icon.svg");
background-size: contain;
background-repeat: no-repeat;
}SVG Sprite (оптимизация)
Все иконки в одном файле, используем через <use>:
<!-- SVG sprite файл (icons.svg) -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="home" viewBox="0 0 24 24">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</symbol>
<symbol id="user" viewBox="0 0 24 24">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
</symbol>
</svg>
<!-- Использование -->
<svg>
<use href="icons.svg#home"></use>
</svg>Преимущества SVG Sprite:
- ✅ Один HTTP запрос для всех иконок
- ✅ Можно стилизовать через CSS
- ✅ Кэшируется браузером
Способ 3: Иконки-шрифты (кастомные)
Можно создать свой шрифт с иконками (как Font Awesome, но свои иконки).
Инструменты:
- IcoMoon — создание иконок-шрифтов
- Fontello — альтернатива IcoMoon
Практические примеры
Иконки в навигации
<nav>
<a href="#">
<i class="fas fa-home"></i>
Главная
</a>
<a href="#">
<i class="fas fa-user"></i>
Профиль
</a>
</nav>Социальные иконки
<div class="social">
<a href="#" aria-label="Facebook">
<i class="fab fa-facebook"></i>
</a>
<a href="#" aria-label="Twitter">
<i class="fab fa-twitter"></i>
</a>
<a href="#" aria-label="Instagram">
<i class="fab fa-instagram"></i>
</a>
</div>Иконки в кнопках
<button class="btn">
<i class="fas fa-download"></i>
Скачать
</button>
<button class="btn">
<i class="fas fa-trash"></i>
Удалить
</button>Стилизация иконок
/* Размер */
.icon {
font-size: 24px; /* Для Font Awesome */
width: 24px; /* Для SVG */
height: 24px;
}
/* Цвет */
.icon {
color: #F36049; /* Для Font Awesome и SVG с currentColor */
}
/* Выравнивание */
.button {
display: flex;
align-items: center;
gap: 8px;
}
.button .icon {
flex-shrink: 0; /* Не сжимается */
}Практическое задание
- Подключите Font Awesome через CDN
- Добавьте иконки в навигацию
- Добавьте социальные иконки в footer
- Создайте кнопки с иконками
- Попробуйте использовать SVG иконки вместо Font Awesome
- Стилизуйте иконки (размер, цвет, отступы)
Что дальше?
Отлично! Теперь вы знаете, как работать с иконками. В следующем уроке мы начнём верстать header, используя все изученные техники, включая иконки.