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

1-е место

2-е место

FontBot3-е место

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

Юлия Игорева5-е место

Дмитрий Руленко6-е место

7-е место

8-е место

Cаня Сиркин9-е место

Степан Иванов10-е место

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

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

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

Посетители:

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

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

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

Друзья сайта

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

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

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

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

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

Загрузил: LANIGIRO

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

Stroke Gap Icons

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

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

Статистика

99+

просмотров

99+

скачиваний

комментов

0.0

рейтинг

200 МОНОХРОМНЫХ ИКОНОК ДЛЯ САЙТА, ЗАКЛЮЧЕННЫХ В ШРИФТ STROKE-GAP-ICONS

В последнее время для интерфейсов сайтов частенько применяют иконки, которые заключены в шрифт. Есть очень известный и популярный Font Awesome, но и есть его аналоги и некоторые из них с более качественным исполнением иконок или просто сделанных в другом стиле. Хочу поделиться с Вами менее известной сборкой иконок, заключенных в шрифте под названием Stroke-Gap-Icons.

200 иконок в шрифте

Плюсы иконок-шрифта

Чем же так хороши иконки, заключенные в шрифт. А я Вам скажу чем:

Вы не зависите от размера иконок в пикселях, вы просто выставляете размер шрифта и все. Качество иконки не будет зависесть от ее размера.
Шрифт, это тот же спрайт, только весит меньше и подгружается быстрее.
Вам не нужно постоянно писать код под каждую иконку, чтобы она появилась на сайте. Вам нужно всего лишь вставить название класса в любой блок и иконка появитсья там, где нужно! Вы также можете использовать параметр content: и вставлять код иконки куда угодно (код вы можете взять в основном css файле)

Плюсов много, но и минусы есть! Скажем если Вам нужно немного видоизменить иконку, то это без проффессиональных навыков работы со шрифтами, почти невозможно сделать, да и уж очень сложно и нудно - легче взять другие иконки. Но думаю из 200-от представленных иконок вы найдете чем заменить ту или инуб не понравившуюся иконку.

Как подключить эти иконки

Подключить данный шрифт-иконки не составит никакого труда:

1. Скачиваем архив, разархивируем его на рабочий стол, закачиваем файл fonts.css и папку fonts в корень вашего сайта.

2. Вам нужно лишь вставить подкючить css файл fonts.css, отвечающий за подключение шрифта и отображение иконок на сайте. Делаем это посредством вставки следующего кода между <head> и </head>:

<link rel="stylesheet" href="fonts.css">

3. Теперь открываем демо, находим нужную иконку и вставляем например вот такой html код:

<span class="icon icon-WorldWide"></span>

Это самая первая иконка в сборке, а допустим чтобы вставить иконку пиццы нужно вместо

icon-WorldWide

поставить

icon-Pizza

и мы получим такой код:

<span class="icon icon-Pizza"></span>

и иконку пиццы на сайте.

Надеюсь иконки Вам пригодились, всем всего хорошего и до новых постов.

Источник Demo

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

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

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

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

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

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

...

Логин: ...

Группа: ...

Статус: ...

О материале:

Комментарии

Порядок вывода комментариев: Maksim Pachino @makspachino1 106 1473795944 1473795944 норм 1

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

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

Smooth Icons

120 Free Coloured Icons

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

Business Icon Set

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

Simply Not Black Icons

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

Fitflat Icon Pack