Шрифтовые монохромные иконки Simple Line Icons в количестве 180-и штук
Всем привет. Шрифтовые иконки постепенно начинают вытеснять обычные сборки иконок в растровой графике (png, jpg и так далее). Популярность Font Awesome в создании интерфейса сайта врядли кто-то будет оспаривать. Но у этого шрифтового архива иконок также есть достаточно много неплохих аналогов.
Хочу Вас познакомить с шрифтовыми иконками Simple Line Icons. В сборке 180 иконок, как классических: юзер, стрелочка вправо, влево, телефон и так далее; так и оригинальных: кошелек, ракета, кубок. Для создания интерфейса на сайте, Вам этих иконок хватит с лихвой.
Подключение иконок
1. Сперва нужно скачать архив и его разархивировать
2. Теперь нужно залить необходимые файлы на сайт, а именно:
- Css файл simple-line-icons.css из папки css в вашу папку css (скорее всего эта папка у вас уже есть, там лежат все ваши стили, если нет, то создайте ее)
- Папку fonts в корень сайта
3. Далее нужно подключить стили и шрифты, уже загруженные на сервер
Делается это очень просто. Нужно в блок <head> (там где подключаются у Вас все css и js файлы) вставить код подключения css файла:
<link rel="stylesheet" href="css/simple-line-icons.css">
Не забудьте, что этот файл должен быть подключен везде, где у Вас будут стоять иконки Simple Line Icons.
4. Теперь осталось только вставить необходимые иконки
Это делается следующим образом: в том месте, где вы хотите видеть иконку, Вам нужно вставить код:
<span class="имя иконки"></span>
например если мы поставим
<span class="icon-user"></span>
то у нас выйдет такая иконка
А вот код иконки с текстом
<span class="icon-user"></span> имя юзера
И выглядит он так:
Не забывайте, что это шрифт и с иконкой нужно работать как с шрифтом, выставлять font-size, font-weight, line-height и так далее
Имя иконки соответствует изображению в «Демо». Если Вам понравились эти иконки, то страницу «Демо» в закладки, будет как шпаргалка. У меня всё! Добро!
_680x377_ce7.webp)
Комментарии ()