Топ загрузчиков

1-е место

2-е место

FontBot3-е место

Хондамир Нарзиев4-е место

Nestovi5-е место

Анастасия Сухова6-е место

Арес.7-е место

Евгений Голубев8-е место

Павел9-е место

julia zamiatina10-е место

Топ по репутации

Сейчас онлайн: 1

Все пользователи

Посетители:

QR-код страницы

Скачать QR-сканер

Привет! Я приветствую тебя на нашем сайте Fonts.clan!

Друзья сайта

Урааа!!! - сайт о uCoz

Webmaster - всё для вашего сайта

Привет, Уважаемый Гость нашего сайта! Добро пожаловать на FONTS.clan!
На нашем сайте зарегистрировано: 748 пользователей, которые оставили 75 комментариев
В базе Fonts.clan: 643 материала, а также 341 обоев!

Вы все еще не с нами? Так чего вы ждете? Зарегистрируйтесь, чтобы получить возможность скачивать уникальные материалы, загруженные на сайт!

Зарегистрироваться

Загрузил: LANIGIRO

Скачать подборку

Simple Line Icons

Категория: Сборники иконок

Раздел: Прочие

Статистика

99+

просмотров

99+

скачиваний

комментов

0.0

рейтинг

ШРИФТОВЫЕ МОНОХРОМНЫЕ ИКОНКИ SIMPLE LINE ICONS

Всем привет. Шрифтовые иконки постепенно начинают вытеснять обычные сборки иконок в растровой графике (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 и так далее

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

Источник Demo

Авторизуйтесь, чтобы скачать "Simple Line Icons"

Скачать подборку

Авторизоваться
Зарегистрироваться

Пользователь LANIGIRO любезно делиться с Вами подборкой "Simple Line Icons", но Вы не можете её скачать, так как вы не авторизованы! Подборку "Simple Line Icons", размером 187.6 Kb из категории "Сборники иконок" скачали 524 раз.

Об авторе материала

Автор материала:

...

Логин: ...

Группа: ...

Статус: ...

О материале:

Комментарии

Добавлять комментарии могут только зарегистрированные пользователи.
Зарегистрируйтесь или войдите в свой аккаунт

Интересные иконочные подборки

Buuf Icons

Minicons Free Vector Icons

Увеличить Перейти

Adapt Icons

Увеличить Перейти

Credit Card & Payment Logos

Увеличить Перейти

iOS 8 Icons