Иконочные шрифты для сайта – Генерация и подключение шрифта иконок к странице сайта. Как использовать иконки шрифта на странице сайта.

Содержание

50 лучших шрифтов с иконоками для веб-дизайна — Записки преподавателя

Еще в 2012 году на сайте Speckyboy, Design Magazine был опубликован первый Icon Font, бесплатный и премиум наборы. Здесь собраны 50 лучших бесплатных шрифтов с иконками (Icon Fonts), которые появились с тех пор. Смотрите.

Хотя, Icon Fonts очень популярны, но везде есть свои подводные камни. Ian Feather (Ян Фетер) обсудил свои причины перехода от Icon Fonts к SVG и хитрости CSS при выборе между Icon Fonts и SVG. Обе публикации явно в пользу SVG. Но, в качестве контраргумента, Pictonic показал, что Icon Fonts грузятся на 10% быстрее SVG. Поэтому, прежде чем использовать шрифты, вам необходимо познакомится с этими соображениями.

Для того, чтобы убедиться, что ваши иконки всегда загружаются должным образом и имеют для различных браузеров, не поддерживающих @fontface, надежные резервные объявления вам необходимо взглянуть на руководящие принципы, разработанные в Filament Group, Пуленепробиваемый доступ к Icon Fonts(перевод появится немного позже).

Dashicons — официальный Icon Font от WordPress (197 иконок)

Dashicons. Загрузить →

Linea Iconset (730+ иконок)

Linea Iconset. Загрузить →

Themify Icons (320+ иконок)

Themify Icons. Загрузить →

Octicons на GitHub (178 иконок)

Octicons на GitHub. Загрузить →

iOS7 векторный Icon Font (100 иконок)

iOS7 iOS7 векторный Icon Font. Загрузить →

Genericons (120 иконок)

Genericons. Загрузить →

Stroke 7 Icon Font (170 иконок)

Stroke 7 Icon Font. Загрузить →

Stroke Icons (80 иконок)

Stroke Icons. Загрузить →

Icon-Works (134 иконок)

Icon-Works. Загрузить →

Devicons — Icon Font для разработчиков (123 иконок)

Devicons. Загрузить →

Solid Icons (210 иконок)

Solid Icons. Загрузить →

77 Essential Icons
(77 иконок)

77 Essential Icons. Загрузить →

Tonicons Outline Icons (200 иконок)

Tonicons Outline Icons. Загрузить →

Stroke 7 – An iOS7 Inspired Thin Stroke Icon Font (170 иконок)

Stroke 7 – An iOS7. Загрузить →

The Elegant Icon Font (360 иконок)

The Elegant Icon Font. Загрузка страницы →

Dripicons — полностью бесплатный векторный шрифт in-line (95 иконок)

Dripicons. Загрузить →

Iconia — икона Шрифт С помощью трех стилей: Regular, круг и Cut (113 иконок)

Iconia. Загрузить →

Metrize Icons — иконки в стиле Metro (300 иконок)

Metrize Icons. Загрузить →

Icon Pack — стилизованный для строки шриф с иконками от Petras Nargela (40 иконок)

Стилизованный для строки Icon Pack. Загрузить →

Ionicons — шрифт с огромными иконками для Ionic Framework
(528 иконок)

Ionicons Загрузить →

Icon Pack (300+ иконки)

Icon Pack. Загрузить →

IcoMoon — бесплатный пакет (450 иконок)

IcoMoon. Загрузить →

Набор Web-иконок от MFG Labs Web (120 иконок)

Набор Web-иконок от MFG Labs Web. Загрузить →

Font Awesome — бесплатный Icon Font (500+ иконок, рекомендую)

Font Awesome. Загрузить →

Foundation Icon Fonts 2 (140 иконок)

Foundation Icon Fonts 2. Загрузить →

Ligature Symbols (250+ иконки)

Ligature Symbols. Загрузить →

OpenWeb бесплатный Icon Font (54 иконок)

OpenWeb Free Icon Font. Загрузить →

Соса — бесплатный Icon Font (120 иконок)

Соса. Загрузить →

One div (91 иконок)

One div. Загрузить →

PW Drawn Icon Font (80+ иконок)

PW Drawn Icon Font. Загрузка страница →

80 Mini Icons — иконки (80 иконок)

80 Mini Icons. Скачать шрифт →

Fontelico (30 иконок)

Fontelico. Загрузить →

Typicons (88 иконок)

Typicons. Загрузить →

Icons V.3 — бесплатный шрифт с иконками от Hüseyin Yilmaz (24 иконок)

Icons V.3 от Hüseyin Yilmaz. Загрузить →

Genericons — иконки для WordPress (123 иконок)

Genericons. Загрузить →

Open Iconic — хорошо читабельный шрифт с иконками (218 иконок)

Open Iconic. Загрузить →

Linecons Free — бесплатный In-Line Icon Font (48 иконок)

Linecons Free. Загрузить →

Outlined Icons от Dario Ferrando (150 иконок)

Outlined Icons от Dario Ferrando. Загрузить →

Feather Icon Set — простой и красивый Icon Font
(130 иконок)

Feather Icon Set. Загрузить →

Minimal — шрифт минималистичного дизайна (48 иконок)

Minimal. Загрузить →

Icony (100 иконок)

Icony. Загрузить →

Goodies Icon Font (25 иконок)

Goodies Icon Font. Загрузить →

Stackicons Social Icon Font (75 иконок)

Stackicons Social. Загрузить →

Socialicious — библиотека социальных медиа-иконок (58) иконки

Socialicious. Загрузить →

Mono Social — шрифт с иконками на основе набора Mono Social (100 иконок)

Mono Social. Загрузить →

Social Media Icons (74 иконок)

Social Media Icons. Загрузить →

Rondo — шрифт с социальными иконками (40 иконок)

Rondo. Загрузка страницы →

JustVector &mdsash; шрифт с социальными иконками
(30 иконок)

JustVector. Загрузка страницы →

Social Media Set Glyph (30 иконок)

Social Media Set Glyph. Загрузить →

Infinity Space Icon Font (230 иконок)

Infinity Space Icon Font. Загрузить →

Map Icons — шрифт для Google Maps (150+) иконки

Map Icons. Загрузить →

Weather Icons — иконки для погоды (92 иконок)

Weather Icons. Загрузка страницы →

Meteocons (40 иконок)

Meteocons. Загрузить →

Оригинал: Top 50 Free Icon Fonts for Web Design

CC BY-NC 4.0 50 лучших шрифтов с иконоками для веб-дизайна, опубликовано К ВВ, лицензия — Creative Commons Attribution-NonCommercial 4.0 International.


1 нравится это

Иконочные шрифты для верстальщиков - Программирование и не только

При разработке современных сайтов сложно представить жизнь без использования шрифтов, состоящих из иконок. Применение шрифтов с иконками дает огромные преимущества при разработке сайта — это работа с иконками как с обычным текстом (можно применять CSS-стили), они прекрасно масштабируются (являются векторными изображениями), уменьшение количества HTTP-запросов при отображении (на загрузку растровых изображений понадобилось бы больше запросов), меньший размер по сравнению с обычными изображениями, поддержка различными браузерами.

Конечно же, есть и такие недостатки как цвет иконки обычно ограничен одним цветом, а для использования недостаточно просто вставить иконку на страницу как при работе с обычными изображениями. Но данные недостатки легко компенсируются их преимуществами перед растровыми иконками.

Давайте рассмотрим бесплатные и полезные пакеты иконочных шрифтов.

Font Awesome

Font Awesome — данный бесплатный пакет иконок не нуждается в рекламе и известен всем frontend-разработчикам, да и не только им. В коллекции шрифта 675 иконок (на данный момент доступна версия 4.7.0). Пожалуй, один из самых популярных бесплатных шрифтов, который используется на многих сайтах и фреймворках. На сайте доступны примеры по работе с Font Awesome. Если еще не пользовались им, то рекомендую взять в работу.

IcoMoon

IcoMoon — в этом бесплатном пакете вам будут доступны 490 векторных иконок. Если вам не терпеться посмотреть на доступные иконки.

Linearicons

Linearicons — менее богатый пакет на количество иконок (всего 170 иконок для бесплатной версии). В принципе есть все базовые иконки для веб-разработчика.

Ionicons

Ionicons — данный чудеснейший пакет включает в себя 730 премиальных иконок и доступен совершенно бесплатно. Среди такого количества я думаю можно найти все что нужно для своего веб-проекта. В шрифт включены иконки для ценителей плоского и

минималистического дизайна. Однозначно, рекомендую!

Ligature Symbols

Ligature Symbols — бесплатный шрифт без лишних иконок. Содержит все необходимые иконки для web. Для тех, кому важна скорость загрузки и не надо ничего лишнего. Кстати, не так уж и мало иконок — около 240 штук.

Stroke 7 Icon Font Set

Stroke 7 Icon Font Set — вас ждут 202 плоские иконки. Приятно для взгляда и очень современно. Рекомендую ознакомиться.

Typicons

Typicons — 336 бесплатных векторных иконок, которые смотрятся довольно интересно.

Themify Icons

Themify Icons — 320+ бесплатных иконок для веб-дизайна и приложений. Специально созданы для ценителей

Apple iOS 7.

Foundation Icon Fonts 3

Foundation Icon Fonts 3 — в принципе обычные иконки, но возможно кому-то именно этот пакет подойдет для работы. Иконок в нем около 283 штук.

Sosa

Sosa — пакет реалистичных иконок от команды разработчиков tenbytwenty. Иконок мало, так что для крупного проекта не подойдет.

Linea

Linea — на сайте для удобства доступно несколько бесплатных пакетов с векторными иконками: базовый пакет, погода, музыка, коммерция, программное обеспечение, разработка, указатели. Плоский дизайн и аккуратность присутствует. В сумме свыше 730+ иконок.

К сожалению, захватить все множество бесплатных векторных иконок не возможно за раз. Поэтому, как только будут появляться интересные пакеты бесплатных шрифтов, я буду их размещать в данном обзоре. Если вы хотите помочь мне с наполнением данной статьи или поделиться интересными иконками, то с радостью выслушаю все ваши комментарии.

Спасибо и следите за обновлениями на моем сайте.

Иконочные шрифты или SVG - что выбрать в 2018? – База знаний Timeweb Community

Графические иконки - ключевой элемент практически любого сайта или приложения. Как правило, весят они немного, однако вопрос выбора формата все равно остается актуальным. Если не брать в расчет стандартные форматы изображений, у разработчиков есть два основных варианта: использовать SVG либо иконочные шрифты (icon fonts). Что из них лучше? Разберемся ниже.

Эволюция иконок

Перед тем, как появился язык стилей CSS, все иконки на сайтах представляли собой изображения. Но так как файлы изображений много весят, разработчики стремились найти один или несколько альтернативных способов отображения маленьких иконок. Например, CSS-спрайты позволили разработчикам хранить все иконки на одном изображении, но из-за проблем с доступностью этот способ не стал популярным способом отображения иконок - и в 2012 на смену им пришли иконочные шрифты. А сейчас многие разработчики отдают предпочтение масштабируемой векторной графике - SVG (Scalable Vector Graphics).

Что такое иконочные шрифты

Иконочные шрифты - текстовые файлы, которые можно модифицировать при помощи CSS. Как следствие, масштабируются они гораздо лучше, чем растровые изображения, т.к. изменение размера не ведет к ухудшению качества изображения. Изменение цвета или добавление тени - все это сделать так же легко, как и при работе с обычным текстом. В сети можно легко найти бесплатные для использования шрифты либо можно создать свой собственный шрифт. К минусам можно отнести то, что большинство наборов со шрифтами содержат иконки, которые вы, скорее всего, не будете использовать - и они будут просто занимать место.

Но, как и у CSS-спрайтов, иконочные шрифты имеют свои недостатки - например, для того, чтобы корректно их отобразить, браузеру приходится делать дополнительные запросы на сервер, что может привести к FOIT (Flash of Invisible Text) - ситуации, когда шрифт не отображается вообще. По этой и другим причинам многие разработчики делают выбор в пользу SVG.

Что такое SVG

SVG (Scalable Vector Graphics) позволяет отображать в браузере векторную графику. Формат SVG быстро стал новым стандартом для иконок и анимации. Они быстрее загружаются, прекрасно масштабируются и более надежные в использовании, чем иконочные шрифты. Векторная графика полностью стоит из кода и весит гораздо меньше, чем изображения в форматах JPG или PNG и большинство библиотек иконочных шрифтов.

Сравнение

Настало время сравнить SVG и иконочные шрифты по нескольким параметрам.

1. Размер

Если использовать встроенный SVG, то есть прописывать SVG в CSS, то код может стать тяжелым и громоздким. К тому же встроенный SVG код не кэшируется пользовательскими браузерами, в отличие от внешних SVG файлов. Поэтому если на определенной странице сайта много разных иконок, то иконочные шрифты будут предпочтительнее встроенных SVG изображений (но при условии, что вы не используете готовую библиотеку иконочных шрифтов).

Важно понимать, что 10 оптимизированных SVG иконок, скорее всего, будут весить меньше, чем целая библиотека иконочных шрифтов. А вот если вы создадите библиотеку только с теми иконками, которые нужны вам, то такая библиотека будет выигрывать по весу.

2. Производительность

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

Встроенные SVG иконки не требуют дополнительного запроса, но и кэшироваться браузером они тоже не могут.

Можно собрать SVG файлы в отдельный внешний файл - и тогда его можно будет кэшировать.

Опять же, производительность во многом зависит от того, сколько весят ваши иконочные шрифты/SVG.

3. Гибкость

Оба формата можно настраивать с использованием CSS, но SVG дает гораздо больше возможностей, например, сделать иконки разноцветными.

Иконочным шрифтам можно прописывать CSS-стили (тень, цвет и т.д.), их можно массово изменять при помощи одного правила в CSS, их можно анимировать.

4. Поддержка браузеров

Какой бы формат вы ни выбрали, его все равно нужно будет дорабатывать для того, чтобы обеспечить поддержку старых браузеров. Т.к. иконочные шрифты существуют дольше, чем SVG, то и поддержка у них шире - их увидят все, кто использует IE 6 и более новые версии.

С другой стороны, сейчас подавляющее большинство пользователей использует современные браузеры, так что на этот пункт сильного внимания обращать не стоит. Единственный нюанс, о котором стоит помнить - IE и Edge не всегда правильно масштабируют SVG файлы.

5. Масштабируемость

И иконочные шрифты, и SVG - это векторные форматы. Поэтому их можно легко увеличивать или уменьшать без потери качества. Браузеры интерпретируют иконочные шрифты как текст, поэтому они могут сглаживаться - и при сравнении SVG изображения выглядят чуть более резкими, чем иконочные шрифты.

Вывод

До сих пор в среде разработчиков нет единого мнения о том, что лучше использовать - иконочные шрифты или SVG. Суть в том, что зачастую многое зависит от поставленных задач и проекта в целом.

Но все же сейчас чаще всего используют SVG - у этого языка разметки лучше масштабируемость, UX (пользовательский опыт), и он поддерживается всеми основными браузерами. Существует мнение, что один из трендов 2018 года - это уход от иконочных шрифтов к иконкам в формате SVG.

В то же время иконочные шрифты станут хорошим решением для проекта с большим количеством иконок в одном стиле.

А что вы используете в разработке, SVG или иконочные шрифты?

Иконочные шрифты для сайта

Лого SiteHere.ru