Шрифтовые иконки Simple Line Icons

Шрифтовые монохромные иконки 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 и так далее

Имя иконки соответствует изображению в «Демо». Если Вам понравились эти иконки, то страницу «Демо» в закладки, будет как шпаргалка. У меня всё! Добро!

Похожие статьи