Шрифтовые иконки: Font Awesome — иконочный шрифт и CSS-инструментарий

25+ бесплатных иконических шрифтов (Icon Fonts) для дизайна вашего WordPress сайта

Знаете, как можно легко и элегантно приукрасить дизайн вашего WordPress сайта? С помощью шрифтовых иконок!

Главное достоинство и преимущество Icon Fonts заключается в том, что эти значки выглядят как графические элементы, но по сути являются шрифтом. А это значит, что эти иконки мгновенно загружаются и масштабируются на экранах с любым разрешением, ведь они векторные.

Смотрите также:

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

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

В этом посте мы отобрали 27 бесплатных наборов шрифтовых иконок. Просто переходите по ссылке понравившегося набора, загружайте и добавляйте на свой сайт WordPress.

1. Font Awesome

3. Themify Icons

4. Foundation Icon Fonts 3

5. Elegant Icon Font

6. Dripicons

7. Pictonic

8. Sosa

9. Typicons

10. Metrize Icons

11. Ionicons

12. Symbol Signs

13. IcoMoon

14. Batch

15. Socialico

16. Raphaël Icon-Set

17. Entypo

18. MFG Labs Icon Set

19. Ligature Symbols

20. PW Drawn Icon Font

21. Fontelico

22. Feather Icon Set

23. Premium Pixels

24. Rondo Social Icon Font

25. Map Icons

26. Weather Icons

27. Space Icons

Смотрите также:

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Как создать набор иконок в формате шрифта

Статья, в которой рассмотрим процесс создания иконочного шрифта с помощью сервиса IcoMoon (https://icomoon.io/).

Разработка персонального иконочного шрифта для сайта является одной из основных задач веб-разработчика. Т.к. использование готовых наборов шрифтов, может сильно «утяжелить» загрузку страниц сайта. Это связано с тем, что они содержат большое количество иконок (Font Awesome — 675 иконок, IconMoon — 491, Foundation Icons — 283, Glyphicons Halflings – более 250). В то время как количество иконок, которых реально требуется для оформления среднего сайта, находится в диапазоне от 20 до 50 единиц.

Преимущества и недостатки иконочных шрифтов

Иконочный шрифт представляет собой обыкновенный шрифт, в котором вместо традиционных символов используются значки (иконки).

Использование иконок в таком формате является очень привлекательным решением. Во-первых, такими иконками очень просто управлять, т.е. изменять их размер, цвет и другие параметры. Осуществляется это с помощью таких же свойств CSS, которые применяются для стилизации обычного текста (font-size, color и др.). Во-вторых, в формате шрифта иконки находятся в векторном формате. Это означает то, что они хорошо масштабируются и отлично выглядят на экранах устройств с высокой плотностью пикселей. Кроме этого шрифт — это сжатый формат, а значит, для его загрузки может потребоваться гораздо меньше времени, чем для загрузки аналогичных векторных изображений. Ещё одним неоспоримым плюсом шрифтовых иконок является то, что они поддерживаются всеми браузерами. Осуществляется это благодаря созданию на базе одного пакета иконок шрифтов в различных форматах: eot, ttf, svg и woff. Это необходимо выполнить для того, что браузер использовал тот формат шрифта, который он «понимает». Потому что на текущий момент нет ни одного формата шрифта, который бы поддерживался всеми браузерами.

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

Основный алгоритм действий по созданию шрифта в IcoMoon App

Рассмотрим некоторые основные шаги по разработке шрифта в сервисе IcoMoon App:

1. Перейти на страницу IcoMoon App, с помощью кнопки, расположенной на главной странице сервиса или используя URL адрес: https://icomoon.io/app/.
2. Ввести название проекта (значок «Manage Projects»).
3. Добавить в проект при необходимости шрифт Font Awesome (кнопка с тремя полосочками -> Icon Library).
4. Добавить в проект пустой набор, который можно использовать для помещения в него пользовательских (своих) иконок (кнопка с 3 линиями -> New Empty Set).
5. Задать название только что созданному набору (кнопка с тремя полосочками -> View / Edit Info).
6. Добавить в набор пользовательские (свои) значки (кнопка «3 горизонтальные линии» -> Import to Set).
7. Выбрать иконки, которые необходимо добавить в результирующий набор, с помощью инструмента «Select».
8. Выполнить генерацию шрифта (нажать внизу страницы на элемент «Generate Font»).
9. Нажать на значок шестерёнки и в открывшемся диалоговом окне ввести название шрифта (Font Name), префикс класса (Class Prefix), выбрать опцию «Use a class» (Использовать класс) и указать в поле значение «.icon».
10. Нажать на кнопку «Download».

Работа в сервисе IcoMoon — Выбор иконок (шаг 1)Работа в сервисе IcoMoon — Указание названий значкам (шаг 2)Работа в сервисе IcoMoon — Установки для генерации шрифта

Подключение иконок в формате шрифта к странице

Для установки иконочного шрифта необходимо распаковать архив, созданный сайтом IcoMoon, и перенести из него в рабочий проект каталог fonts (шрифты) и файл «style.css».

По умолчанию папка со шрифтами должна располагаться в том же каталоге что и файл CSS. Для того чтобы каталог fonts расположить по-другому, необходимо внести соответствующие изменения в файл «style.css».

Подключения шрифта к странице и классов для удобной работы с ним осуществляется посредством файла «style.css».

<!-- path-to - путь до файла style.css -->
<link href="path-to/style.css" rel="stylesheet">

При желании содержимое файла «style.css» можно включить в свой файл стилей. Это позволит сократить количество HTTP-запросов и немного увеличить загрузку страницы.

Использование иконок на странице

Применение иконок созданного шрифта на странице осуществляется с помощью элемента i, к которому необходимо добавить базовый класс icon (определяется на основе настройки «Use a class») и класс иконки.

<!-- icon - базовый класс -->
<!-- icon-ok - класс иконки ok -->
<i></i>

Создание иконок социальных сетей для сайта

Разработку собственных социальных значков для сайта очень просто выполнить в открытом векторном SVG редакторе Inkscape.

Для этого их можно нарисовать или воспользоваться уже существующими изображениями иконок из бесплатных наборов.

Если вы в качестве исходников будете использовать растровые изображения значков, то их предварительно следует векторизовать.

После подготовки векторных svg-изображений их можно с помощью сервиса IcoMoon собрать в иконочный шрифт.

Создание иконки «Twitter» в Inkscape

Пример иконок социальных сетей в форме прямоугольника со скруглёнными краями.

Сборка шрифта из созданных иконок в IcoMoon

Скачать шрифт с социальными иконками и исходные коды можно по следующей ссылке: https://yadi.sk/d/oaOfUROSyTjDQ.

Использование социальных иконок на странице (классы социальных значков можно посмотреть в файле «style.css»):

<i></i>

Кроме IcoMoon есть ещё и другие онлайн сервисы для создания значков в виде шрифта. К ним относится «fontello.com», «fontastic.me», «glyphter.com», «pictonic.co» и др.

Шрифтовые иконки — достойная альтернатива растру

Чем иконочный шрифт лучше иконок jpg/png

Масштабируемость без потери качества. Никто не ищет буквы побольше для заголовков и буквы поменьше для текста. Ты просто подключаешь шрифт и в css указываешь размер букв. Тоже самое с иконочным шрифтом. Иконку можно сделать любого размера и она всегда будет чёткой.

Иконочный шрифт это прежде всего шрифт и следовательно к таким иконкам применяются все css свойства, которые можно применить к тексту. Для изменения цвета иконки не нужен графический редактор. Просто поменяй цвет в css. Кстати псевдо классы типа :hover тоже срабатывают, что даёт ещё больший простор для творчества.

Как подключить иконочный шрифт fontawesome

Где брать иконочные шрифты? Поиск выдаст кучу результатов разной степени платности и универсальности. Рассмотрим два fontello.com и fontawesome.ru

Начнём с бесплатного шрифта с хорошим описанием на русском — fontawesome.ru. Первым делом качаешь и распаковываешь архив. Копируешь папку font-awesome в папку с сайтом. Дальше нужно подключить… Думаешь шрифт? Нет. Подключаеш css файл font-awesome.min.css добавив в <head>

<link rel="stylesheet" href="путь/до/font-awesome/css/font-awesome.min.css">

Иконки fontawesome вставляются следующим образом. Там где должна быть иконка вставляешь строчный элемент, например <i> или <span> и добавляешь к нему класс fa и соответствующий иконке класс.  Проще сделать следующим образом. На сайте fontawesome.ru переходишь в меню Иконки и кликаешь по нужной иконке. Попадаешь на страницу где можно скопировать код, который нужно разместить там, где будет иконка. Так выглядит код для Телеграм.

<i aria-hidden="true"></i>

Просто выводом иконок дело не ограничивается. Добавляя классы можно анимировать, изменять размер, поворачивать иконки. Полный список возможностей с подробным описанием и примерами смотри на fontawesome.ru/examples/ .

Ещё один сайт где можно на халяву хапнуть шрифтовых иконок — fontello.com. Он отличается от fontawesome.ru тем, что можно создать свой набор иконок, а не тянуть все, большая часть которых не пригодиться. Чтобы создать свой набор  заходишь на  fontello.com. На вкладке Select Icons кликаеш по нужным иконкам. Рядом с красной кнопкой Download пишешь название шрифта и скачиваешь свой иконочный шрифт.

Иконки с fontello вставляются также через добавление класса к строковому элементу. Название классов смотри в файле demo.html(должен быть в скачанном архиве с шрифтом). Дефолтные названия классов можно изменить на вкладке Customize Names.

Иконочные шрифты или 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 или иконочные шрифты?

Минусы и плюсы использования иконочных шрифтов

Существует два принципиально разных способа, добавления иконок на сайт:

• в виде картинки (растровой или векторной)
• в качестве иконочного шрифта

Разумеется, что у обоих вариантов есть свои недостатки и вообще не существует правильного способа, как вставить иконки на сайт. А есть подходящий способ, в зависимости от конкретной ситуации.

Сегодня мы рассмотрим все минусы и плюсы использования на сайтах иконочных шрифтов.

Браузерная интерпретация

Следует помнить, что иконочный шрифт – это всего лишь текст, который может выглядеть немного по разному (более или менее размытым) в зависимости от того, какой браузер использует пользователь. Кроме того, браузеры могут добавлять свои дефолтные значения у стилей, касаемые любых шрифтов, например line-height. Что в свою очередь сказывается на трудностях с позиционированием иконок. Мы, не можем быть уверенными, что иконка в макете, будет идентична на 100% той, что пользователь увидит на своем устройстве.

Одноцветные иконки

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

Анимация

Можно забыть про анимированные иконки.

Пустые теги и семантика

Обычно шрифтовые иконки вставляются в HTML разметку через пустые теги span и i. А сами иконки выводятся на страницу через псевдоэлементы after или before. Получается, что страница наполнена пустыми тегами. С точки зрения семантики, это не совсем хорошо.


<span><i ></i></span>


Сложности на больших проектах

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

Ограниченный дизайн

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

Векторный формат

Иконки шрифтов имеют векторный формат, поэтому масштабируются без потери качества (чего не скажешь о растровом формате).

CSS оформление

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

Поддержка браузерами

У иконочного шрифта хорошая поддержка браузерами. Если большая доля посетителей просматривает сайт заказчика с IE7, тогда однозначно стоит использовать иконочный шрифт. Но мне трудно представить такую ситуацию, просто на грани фантастики.

Подключение сторонних библиотек (Font Awesome) – лишний HTTP-запрос к серверу, на который ругается Google PageSpeed при тесте на скорость загрузки сайта. Например, при использовании SVG иконок, не будет ни одного запроса к серверу. При условии, что SVG код иконок встроен в HTML разметку, а не вставляется картинкой в формате SVG.

Но с другой стороны, для загрузки всех иконок нужен только один HTTP-запрос. Посмотрите, как много может быть запросов к серверу, при добавлении картиночных иконок, непосредственно в HTML-код.


<ul>

    <li>

        <img src="man.png" alt="">

    </li>

    <li>

        <img src="female.png" alt="">

    </li>

    <li>

        <img src="boss.png" alt="">

    </li>

</ul>


Выводы

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

Узнайте в этом видеокурсе все мои секреты успешного ведения бизнеса по созданию сайтов на заказ.

• 
  Создано 21.02.2020 10:01:09

• 
  
  Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Шрифтовые иконки 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></span>

например если мы поставим 

<span></span>

то у нас выйдет такая иконка

А вот код иконки с текстом

<span></span> имя юзера

И выглядит он так:

Не забывайте, что это шрифт и с иконкой нужно работать как с шрифтом, выставлять font-size, font-weight, line-height и так далее

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

Помогла статья? Угости чашечкой кофе =)

Десять причин нашего перехода с иконочного шрифта на SVG

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

1. Разделение функций

До недавнего времени на lonelyplanet.com использовался подключённый
шрифт, в котором все иконки были упакованы в один файл вместе с ним, причём
глифы хранились в области частного использования Unicode. Такое решение нас
полностью устраивало, поскольку для загрузки всех иконок требовался всего один
HTTP-запрос, но, в то же время, данное решение ограничивало возможность
управления приоритетом загрузки ресурсов.

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

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

Контраргумент

Объединять подключённый шрифт и иконочный шрифт вовсе необязательно, их можно
хранить отдельно. Наверное, мы бы так и сделали, если бы решили остановиться
на использовании иконочного шрифта.

2. Некоторые устройства не поддерживают области частного использования Unicode

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

Я уже и не помню, на каком устройстве проводил тестирование, когда обнаружил,
что одна из наших иконок с «птичкой» была заменена иконкой цветной печати.
Страница казалась мне дилетантской и «сломанной», что, без сомнения, послужило
дополнительным стимулом для перехода на SVG.

3. Чёрные квадратики и крестики в Opera Mini

Добиться правильной поддержки и распознавания начертания шрифта никогда не
было просто. Уверен, что вы все видели эту иллюстрацию отрисовки шрифта
Awesome в Opera Mini:

Я не буду вдаваться в подробности, так как проблемы поддержки Opera Mini и
многих других платформ уже хорошо описаны в этой статье от @kaelig.

Если абстрагироваться от самой Opera Mini, я думаю, что здесь особенно важен
тот момент, что мы определили то самое слепое пятно, которое мы в принципе не
в состоянии контролировать. К сожалению, мы физически не можем провести
тестирование на всех устройствах без исключений, потому нам следует отдавать
предпочтение приёмам, при которых корректное отображение наиболее вероятно.

На данный момент, мы получаем не очень большую долю трафика с Opera Mini.
Однако, важно помнить, что мы — компания, связанная с сферой туризма, и мы
обязаны предоставляет свои услуги в любых условиях, при любом качестве
подключения к сети. Так что нам всегда следует стремится делать наш сервис
более доступным. Наибольшую уверенность в том, что пользователь увидит
адекватное отображение страницы, нам предоставляют форматы SVG и PNG.

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

В Chrome Canary и Beta недавно появилась отвратительная ошибка при
отображении шрифтов. Если вы её пока не встречали, вкратце — после
определённого периода неактивности страницы шрифт сбрасывается и заменяется на
системный.

Когда происходит сброс шрифта, ваш текст отображается в Georgia, и, хоть это и
не критически важный момент, он все же действует на нервы. А вот когда тот
самый шрифт отвечает и за отображение иконок, страница внезапно заполняется
мусором из чёрных квадратиков, и пользоваться нормально ей становится невозможно.

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

Контраргумент

Эта ошибка так и не добралась до официальной сборки Chrome.

5. Чётче иконки в Firefox

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

6. Не всегда есть возможность использовать генерируемый контент

Если вы хотите использовать шрифтовые иконки в CSS, вам придётся прописывать
их, используя свойство content для генерируемого контента. Иногда это может
быть затруднительным, потому что вы уже используете псевдоэлементы :before и
:after, да и не все элементы поддерживают генерируемое содержимое.

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

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

7. Проще позиционирование

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

Используя SVG, нам стало гораздо легче их позиционировать. А для единого
кроссбраузерного отображения мы используем background-size: cover, и просто
делаем размеры элемента резиновыми.

8. Многоцветные иконки

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

Нам всегда была необходима поддержка многоцветных иконок для карт. Ранее,
кроме иконочного шрифта мы использовали для этой цели дополнительный спрайт в
формате PNG. В результате перехода на SVG мы смогли избавиться от лишнего
спрайта, который для пользователя являлся дополнительным запросом, а для нас —
дополнительным объектом, нуждающимся в поддержке.

Контраргумент

Многоцветный иконочный шрифт можно получить посредством наложения иконок.

Тем не менее, сделать это качественно та еще задачка: если правильное
кросс-браузерное позиционирование одного глифа — это довольно непростой фокус,
то с двумя всё становится ещё сложнее.

9. SVG позволяет использовать иконки с анимацией

Мы пока не воспользовались этим свойством, но, вполне возможно, что мы ещё
рассмотрим такую возможность, раз уж она у нас теперь есть.

10. Нам не давала покоя мысль, что мы используем хак

Применение шрифта для отображения иконок нам всегда казалось хаком. Бесспорно,
он великолепен, однако суть всё же состоит в маскировании объекта одного типа
под какой-то другой.

Как насчёт преимуществ использования шрифта?

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

Стоит признать что нам было бы намного сложнее справиться с этими проблемами
без огромной работы, проделанной командой Filament Group на Grunticon.

Вариативность цвета

Огромным преимуществом иконочного шрифта является его гибкость. У него нет
ограничений в количестве вариаций цвета, его можно легко менять в зависимости
от текущего состояния (:hover, :focus, .is-active и др.). Это редкая
роскошь, которая очень способствует ускорению разработки. И это одна из причин
того, почему мы так долго откладывали переход на SVG.

Наше решение

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

В Grunticon каждая иконка объявляется отдельно, таким образом избегается
использование спрайтов. Мы последовали их примеру, но, хотя мы и
использовали для каждой иконки один CSS-селектор, все они были
представлены в шести цветах, как показано здесь.

Так как мы всего лишь несколько раз дублировали одну и ту же иконку в одном и
том же файле, его размер сжался до размера одной иконки (плюс около 50 байтов
на GZIP-указатели). Это значит, что мы можем создать практически любое
количество вариаций цвета почти без дополнительных затрат со стороны ресурсов.
Вот пример работы этого приёма на jsFiddle.

Это решение дало нам ту гибкость, которую мы уже считали утраченной. Мы также
получили дополнительное преимущество в виде более корректного отображения
цветовой палитры, которого мы постепенно лишились при использовании иконочного
шрифта.

С помощью этого приёма можно также без усилий применять к иконкам изменения,
привязанные к состоянию, изменяя позиционирование фона.

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

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

Иконочный шрифт работает во всех браузерах вплоть до IE8, в отличие от
SVG. Для нашего варианта реализации нам также нужна поддержка
background-size, которая является почти такой же, как и для SVG.

Наше решение

У Grunticon реализован креативный подход к старым версиям браузеров. Он
создаёт PNG-версии SVG-файлов, и передаёт их старым браузерам в зависимости от
того, поддерживают они SVG, или нет.

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

Мы также пробовали использовать этот полифил background-size, однако
вскоре отказались от него. Я бы крайне не советовал его использовать, если
вам нужно изменить размер больше, чем для одного-двух изображений.
Обнаружилось, что его применение для более чем двух изображений приводит к постоянным сбоям в IE8.

Стоило ли оно того?

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

Мы используем SVG на Lonely Planet с ноября 2013 года, и пока никаких
проблем по разработке в этой части не возникало.

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

Иконочные шрифты — это шрифты, содержащие символы и глифы вместо букв или цифр. Они популярны среди веб-дизайнеров, поскольку вы можете стилизовать их с помощью CSS так же, как и обычный текст. Кроме того, поскольку они векторные, их легко масштабировать.
Они маленькие, поэтому загружаются быстро и (бонус!) Поддерживаются во всех браузерах. Обычно шрифты значков имеют только один цвет, и их заставляют следовать сетке, например, 16 пикселей на 16 пикселей или 32×32. Любой эффект CSS3 неплохо смотрится на Retina-дисплее.Иконочными шрифтами очень легко манипулировать с помощью CSS3.
Иконочные шрифты — довольно простой способ решения проблемы адаптивного дизайна. Очень просто настроить отображение текста разного размера для разных размеров области просмотра, но гораздо сложнее изменить размер изображений. Также просто изменить их цвет или добавить тень к форме значка шрифта.
Есть несколько недостатков в использовании шрифтов со значками. Во-первых, хотя вы можете изменить их цвет, вы не можете использовать более одного цвета. Прямо сейчас популярны простые, чистые, монохромные дизайны, так что это не большая проблема, но об этом все же следует знать.Другая проблема — доступность. Хотя сделать значки шрифтов доступными, поместив их в класс aria, довольно просто, об этом следует помнить.
Вы можете получить иконочные шрифты из множества разных мест. Три самых популярных — Entypo, Font Awesome и IcoMoon. Вы можете использовать эти шрифты на своем сайте через объявление CSS @ font-face.

Entypo

CC BY-SA 3.0 предоставляет Entypo бесплатно, поэтому, если вы хотите использовать его, вы можете, но они ожидают, что вы включите простую атрибуцию.Entypo Suite — это пакет, который включает шрифты OpenType, TrueType и @ font-face. Entypos был создан Данилом Брюсом и Андреасом Бломбеком.
Сайт Entypo имеет простой интерфейс и включает в себя карту персонажей, которая является полным справочником, так что вы можете легко выбрать правильный значок, когда вы его ищете. На ваш выбор более 250 иконок. Entypo 2.0 включает в себя расширение для социальных сетей, поэтому вы можете добавлять значки социальных сетей, таких как Twitter, Facebook, Google+, Pinterest и т. Д.

Font Awesome

Font Awesome бесплатен и имеет открытый исходный код.Изначально он был разработан для работы с Bootstrap, но хорошо работает со всеми фреймворками. Чтобы использовать значки Font Awesome, вам нужно использовать @fontface и поместить их в элемент или, а затем назначить им классы. Что очень хорошо в Font Awesome, так это то, что, поскольку он полностью открыт, он пользуется большой поддержкой и постоянным обновлением. Если у вас есть вопросы, вы можете просто перейти в раздел «Сообщество» на их сайте и найти ответы на них.
Есть множество разных способов разместить значки Font Awesome на своем сайте.Они показывают фрагменты кода, чтобы помочь вам понять, как добавить значки Font Awesome на ваш сайт. Font Awesome также предоставляет множество отличных советов, которые помогут вам начать работу с их размещением на вашем сайте.

IcoMoon

IcoMoon предлагает как бесплатные, так и платные шрифты. Бесплатные шрифты имеют открытый исходный код, а премиум-шрифты платные. У IcoMoon также есть веб-приложение, которое позволяет вам создавать собственный шрифт, выбирая только те значки, которые вам нужны.
Вы даже можете добавить в это приложение свои собственные значки, которые будут включены в шрифт, созданный через их веб-приложение.После того, как вы выбрали значки, IcoMoon предоставит вам файл HTML, в котором показано, как именно использовать значок шрифта! Entypo также включен в качестве одного из шрифтов на выбор в IcoMoon.
IcoMoon — фантастический инструмент, позволяющий включать на свой сайт только те значки, которые вы хотите. Если вы добавите меньше значков, ваша страница будет загружаться быстрее.

шрифтов Foundation Icon 3 | Детская площадка от ЗУРБ

Как они были построены

Здесь, в ZURB, мы создали эти значки с особыми стандартами, которые дают единый голос и стиль для разработки удивительного набора шрифтов, который каждый сможет любить, наслаждаться и использовать на своем веб-сайте.Некоторые стандарты включают:

• Геометрический Все значки имеют базовые формы, такие как треугольники, квадраты, прямоугольники и круги.
• Круглые углы Все значки сделаны с закругленными углами, чтобы они выглядели более мягкими и доступными.
• Толщина линий Все значки выбирают более толстые линии, а не тонкие линии, чтобы значки можно было масштабировать, а также придать им дружелюбный вид, к которому мы стремимся.
• Natural Angles Мы задали эти удельные градусы поворота, чтобы сохранить согласованность в целом.
• Масштабируемость При создании этих значков мы думаем о том, как эти значки будут масштабироваться при малых и больших размерах.

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

Как ими пользоваться

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

Слияние стилей

Очень легко подключить таблицы стилей пакета, чтобы оживить ваш новый значок веб-шрифта. После загрузки шрифтов вы сможете просто объединить файлы foundation-icons.css, и foundation-icons. [Eot / ttf / svg / woff] прямо в Foundation.

Напишите свою разметку

Мы использовали для элементов значков. Вы просто применяете соответствующие классы, соответствующие значку, который вы хотите использовать.Вот как выглядит разметка:

Стиль прочь!

Вы можете использовать несколько замечательных приемов CSS, чтобы начать изучение различных стилей. Мы сами придумали несколько, посмотрите их:

Скачать шрифты

Мы собрали несколько удобных пакетов загрузки, которые легко впишутся в ваш проект Foundation!

Загрузите шрифт

Попробуйте Foundation

Если вы еще не пробовали Foundation, мы настоятельно рекомендуем его.Вы будете кодировать быстрее и лучше в кратчайшие сроки!

Посетить Фонд

Мысли?

Перейдите к записи в блоге, чтобы узнать, что говорят другие, или сообщить нам, что вы думаете.

Ищете старый набор?

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

иконок веб-шрифтов | Стили и внешний вид пользовательского интерфейса Kendo

Начиная с версии R1 2017, Kendo UI предоставляет интегрированные значки шрифтов, предназначенные для Интернета, и виджеты визуализации данных пакета.В настоящее время доступно 577 иконок.

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

В следующем примере показано, как добавить значок шрифта к кнопке пользовательского интерфейса Kendo.

  
          Копировать
    
  

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

Использование шрифтов значков в пользовательском интерфейсе (UI) естественным образом заменяет устаревшую технику спрайтов значков.

Значки шрифтов

демонстрируют значительные преимущества, например:

• Улучшенная масштабируемость. Хотя спрайты значков являются растровыми изображениями и плохо масштабируются, шрифты значков используют векторную графику, идеально выглядят на дисплеях Retina и делают масштабирование столь же простым, как установка параметра конфигурации font-size .
• Улучшенные возможности дизайна — вы можете легко применять эффекты CSS на лету, задав цвет текста, тень или другие параметры для различных состояний взаимодействия. Например, на : hover .
• Улучшенная поддержка браузера. Значки шрифтов не зависят от браузера и поддерживаются всеми современными браузерами.
• Уменьшенное количество HTTP-запросов. Чтобы загрузить иконочный шрифт, вам потребуется максимум несколько HTTP-запросов.
• Уменьшенный размер файла — файл размером 100 КБ содержит примерно 500 векторных значков.

Чтобы использовать значки шрифтов Kendo UI:

1. Загрузите тему Kendo UI в свой проект.

2. Присвойте тегу HTML k-icon класс CSS, за которым следует предопределенный класс из списка значков шрифтов. Например, элемент , как показано в следующем примере.

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

   

<стиль>
    .my-custom-icon-class: before {
        content: "\ e13a"; / * Добавляет глиф, используя номер символа Unicode * /
    }
 
  

Иконочные шрифты поддерживают следующие параметры визуального улучшения:

Регулировка размера

Значки шрифтов Kendo UI созданы на основе сетки 16 пикселей. Чтобы добиться идеального отображения значков, увеличивайте масштаб, сохраняя размер в 16 единиц (32, 48, 64 и т. Д.).

Вы можете масштабировать значки, просто установив параметр конфигурации font-size .

   
 
 
 

<стиль>
    .k-icon-32 {
        размер шрифта: 32 пикселя; / * Устанавливает размер значка 32 пикселей * /
    }

    .k-icon-48 {
        размер шрифта: 48 пикселей; / * Устанавливает размер значка 48 пикселей * /
    }

    .k-icon-64 {
        размер шрифта: 64 пикселей; / * Устанавливает размер значка 64 пикселей * /
    }
 
  

Настройка цветов

Чтобы установить цвет значка, используйте свойство color CSS.

   
 

<стиль>
    .colored-icon {
        цвет: зеленый;
    }

  

Применение перелистывания

Чтобы лучше разместить значок в приложении, переверните его с помощью предопределенных классов CSS k-flip-h и k-flip-v .

Значки шрифтов отсортированы по группам в зависимости от функции, которую они помогают вам проиллюстрировать.

Действия

• .k-i-undo
• .k-i-redo
• .k-i-reset
• .k-i-reload
  .k-i-refresh
  .k-i-повторение
• .k-i-неповторение
• .k-i-reset-sm
• .k-i-reload-sm
  .k-i-refresh-sm
  .k-i-recurrence-sm
• .k-i-часы
• .k-i-calendar

.

• .k-i-save
  .k-i-floppy
• .k-i-print
  .k-i-printer
• .k-i-edit
  .k-i-Pencil
• .k-i-delete
  .k-i-trash
• .k-i-attachment
  .k-i-clip
• .k-i-attachment-45
  .k-i-clip-45
• .k-i-link-horizontal
  .k-i-hyperlink
• .k-i-unlink-horizontal
  .k-i-hyperlink-remove
• .k-i-link-vertical
• .k-i-unlink-vertical
• .k-i-замок
• .k-i-unlock
• .k-i-set-column-position
• .k-i-stick
• .k-i-unstick
• .k-i-cancel
• .k-i-cancel-outline
• .k-i-cancel-circle
• .k-i-check
  .k-i-checkmark
• .k-i-check-outline
  .k-i-checkmark-outline
  .k-i-success
• .k-i-check-circle
  .k-i-checkmark-circle

.

• .k-i-close
  .k-i-x
• .k-i-close-outline
  .k-i-x-outline
  .k-i-error
• .k-i-близкий круг
  .к-я-х-круг
• .k-i-plus
• .k-i-plus-outline
• .k-i-plus-circle
• .k-i-minus
  .k-i-kpi-trend-equal
• .k-i-minus-outline
• .k-я-минус-круг
• .k-i-div
• .k-i-equal

.

• .k-i-not-equal
• .k-i-less-or-equal

.

• .k-i-больше-или-равно
• .k-i-sort-asc
• .k-i-sort-desc
• .k-i-unsort
• .k-i-sort-clear
• .k-i-sort-asc-sm
• .k-i-sort-desc-sm

.

• .k-i-фильтр
• .k-i-filter-clear
• .k-i-filter-sm
• .k-я-фильтр-сортировка-asc-sm
• .k-i-filter-sort-desc-sm

.

• .k-i-фильтр-добавить-выражение
• .k-я-фильтр-добавочная группа
• .k-i-login
• .k-i-logout
• .k-i-download
• .k-i-upload
• .k-i-hyperlink-open
• .k-i-hyperlink-open-sm

.

• .k-i-launch
• .k-i-window
  .k-i-window-maximize
• .k-i-windows
  .k-i-window-restore
  .k-i-tile
• .k-i-window-минимизировать
• .k-i-gear
  .k-i-cog
  .k-i-custom

.

• .k-i-шестерни
  .k-i-cogs
• .k-i-wrench
  .k-i-settings

.

• .k-i-preview
  .k-i-eye
• .k-i-zoom
  .k-i-search
• .k-i-zoom-in
• .k-i-zoom-out
• .k-i-pan
  .k-i-move

.

• .k-i-hand
• .k-i-cursor
• .k-i-Calculator

.

• .k-i-cart
  .k-i-shopping-cart

.

• .k-i-коннектор
• .k-i-plus-sm
• .k-i-minus-sm
• .k-i-kpi-status-deny
• .k-i-kpi-status-hold
• .k-i-kpi-status-open

.

• .k-i-штрих-код
• .k-i-barcode-outline
• .k-i-сканер штрих-кода
• .k-i-qr-код
• .k-i-qr-code-outline
• .k-i-qr-код-сканер
• .k-i-сканер-штрих-кода-QR-код-сканер
• .k-i-подпись
• .k-i-доступность
• .k-i-export
• .k-i-import

Оповещения и уведомления

• .k-i-notification
  .k-i-bell
• .k-i-information
  .k-i-info
• .k-i-question
  .k-i-help
• .k-i-warning
  .k-i-exception

Монтаж

• .k-i-page-properties
• .k-i-bold
• .k-i-italic

.

• .k-i-underline
• .k-i-font-family

.

• .k-i-цвет переднего плана
• .k-i-convert-нижний регистр
• .k-i-convert-uppercase
• .k-i-strikethrough

.

• .k-i-sub-script
• .k-i-sup-скрипт
• .k-i-div
• .k-i-all

.

• .k-i-h2
• .k-i-h3
• .k-i-h4
• .k-i-h5
• .k-i-h5
• .k-i-h6
• .k-i-list-order
  .k-i-list-numbered
• .k-i-list-unordered
  .k-i-list-bulleted
• .k-i-list-roman-upper
• .k-i-list-roman-lower
• .k-i-indent-увеличение
  . k-i-indent
• .k-i-indent-reduce
  .k-i-outdent
• .k-i-insert-up
  .k-i-insert-top
• .k-i-insert-middle

.

• .k-i-insert-down
  .k-i-insert-bottom
• .k-i-align-top
• .k-i-align-middle
• .k-i-align-bottom
• .k-i-align-left
• .k-i-align-center
• .k-i-align-right
• .k-i-align-justify
• .k-i-align-remove
• .k-i-text-wrap
• .k-i-rule-horizontal
• .k-i-table-position-left
• .k-i-table-position-center
• .k-i-table-position-right

.

• .k-i-table-align-top-left
• .k-i-table-align-top-center
• .k-i-table-align-top-right
• .k-i-table-align-middle-left
• .k-i-table-align-middle-center

.

• .k-i-table-align-middle-right

.

• .k-i-table-align-bottom-left
• .k-i-table-align-bottom-center
• .k-i-table-align-bottom-right
• .k-i-table-align-remove
• .k-я-границы-все
• .k-я-границы-за пределами
• .k-я-границы-внутри
• .k-i-border-inside-horizontal

.

• .k-i-border-inside-vertical
• .k-i-border-top
• .k-i-border-bottom
• .k-i-border-left
• .k-i-border-right
• .k-i-border-no

.

• .k-я-границы-показать-скрыть
• .k-i-form
  .k-i-border
• .k-i-form-element
• .k-i-code-snippet

.

• .k-i-select-all
• .k-i-button
• .k-i-select-box
• .k-i-calendar-date

.

• .k-i-group-box

.

• .k-i-textarea

.

• .k-i-textbox
• .k-я-текстовое поле-скрытый
• .k-i-пароль
• .k-i-paragraph-add
• .k-i-edit-tools
• .k-я-шаблон-менеджер
• .k-i-change-ручное
• .k-i-track-change
• .k-i-track-changes-enable

.

• .k-i-track-changes-accept

.

• .k-i-track-changes-accept-all

.

• .k-i-track-changes-отклонить
• .k-i-track-changes-reject-all

.

• .k-i-document-manager
• .k-i-custom-icon
• .k-я-словарь-добавить
• .k-i-image-light-dialog
  .k-i-image-insert
• .k-я-изображение-редактировать
• .k-я-редактор изображений-карт
• .k-i-comment
• .k-я-комментарий-удалить
• .k-я-комментарии-удалить-все
• .k-i-silverlight
• .k-i-media-manager
• .k-i-video-external
• .k-i-flash-менеджер
• .k-i-find-and-replace
  .k-i-find
• .k-i-copy
  .k-i-файлы
• .k-i-cut
• .k-i-paste
• .k-i-paste-as-html

.

• .k-i-paste-from-word

.

• .k-i-paste-from-word-strip-file
• .k-i-paste-html

.

• .k-i-paste-markdown
• .k-i-paste-plain-text

.

• .k-i-apply-format
• .k-i-clear-css

.

• .k-i-copy-format
• .k-i-strip-all-форматирование
• .k-i-strip-css-формат
• .k-i-strip-font-elements
• .k-i-strip-span-elements
• .k-i-strip-word-formatting
• .k-i-формат-код-блок
• .k-i-style-builder

.

• .k-я-модуль-менеджер
• .k-i-hyperlink-light-dialog
  .k-i-hyperlink-insert
• .k-i-hyperlink-глобус
• .k-я-гиперссылка-глобус-удалить
• .k-i-hyperlink-email

.

• .к-я-якорь
• .k-i-table-light-dialog
  .k-i-table-insert
• .k-i-table
  .k-i-table-unmerge
• .k-я-таблица-свойства
• .k-i-table-cell
• .k-я-свойства-таблицы-ячейки
• .k-я-таблица-столбец-вставка-слева
• .k-i-таблица-столбец-вставка-справа
• .k-i-table-row-insert-выше
• .k-i-table-row-insert-below
• .k-я-таблица-столбец-удалить
• .k-я-таблица-строка-удалить
• .k-я-таблица-ячейка-удалить
• .k-я-таблица-удалить
• .k-я-ячейки-слияние
• .k-я-ячейки-слияние-по горизонтали
• .k-я-ячейки-объединить по вертикали
• .k-i-cell-split-Horizontally

.

• .k-i-cell-split-vertical
• .k-i-pane-freeze
• .k-i-row-freeze
• .k-i-column-freeze
• .k-i-toolbar-float
• .к-я-проверка орфографии
• .k-i-validation-xhtml

.

• .k-i-данные-валидации
• .k-i-toggle-полноэкранный режим
• .k-я-формула-FX
• .k-i-sum
• .k-i-символ
• .k-i-доллар
  .k-i-currency
• .k-i-процент
• .k-i-custom-format

.

• .k-i-десятичное-увеличение
• .k-i-десятичное-уменьшение
• .k-i-font-size

.

• .k-i-image-absolute-position
• .k-i-strip-all-formatting
• .k-i-crossstab

.

• .k-i-table-body
• .k-я-таблицы-столбцы-группы
• .k-i-стол-уголок
• .k-i-таблица-строки-группы

Файлы и папки

• .k-i-папка
• .k-i-folder-open
• .k-i-folder-add
• .k-i-folder-up
• .k-i-folder-more
  .k-i-fields-more
• .k-я-агрегат-поля
• .k-i-file
  .k-i-file-vertical
• .k-i-file-add
• .k-i-file-txt
  .k-i-txt
• .k-i-file-csv
  .k-i-csv
• .k-i-file-excel
  .k-i-file-xls
  .k-i-excel
  .k-i-xls

.

• .k-i-file-word
  .k-i-file-doc
  .k-i-word
  .k-i-doc

.

• .k-i-file-mdb
  .k-i-mdb
• .k-i-file-ppt
  .k-i-ppt
• .k-i-file-pdf
  .k-i-pdf
• .k-i-file-psd
  .k-i-psd

.

• .k-i-file-flash
  .k-i-flash
• .k-i-file-config
  .k-i-config
• .k-i-файл-ascx
  .k-i-ascx
• .k-i-file-bac
  .k-i-bac
• .k-i-file-zip
  .k-i-zip

.

• .k-i-film
• .k-i-css3
• .k-i-html5
• .k-i-html
  .k-i-source-code
  .k-i-view-source
• .k-i-css
• .k-i-js
• .k-i-exe
• .k-i-csproj
• .k-i-vbproj
• .k-i-cs

.

• .k-i-vb
• .k-i-sln
• .k-i-cloud
• .k-i-file-horizontal
• .k-i-subreport
• .k-i-data
• .k-i-report-header-section

.

• .k-i-report-footer-section

.

• .k-я-группа-заголовок-раздел
• .k-i-group-footer-section
• .k-i-page-header-section

.

• .k-i-page-footer-section
• .k-i-detail-section
• .k-i-toc-section
• .k-i-group-section

.

• .k-i-parameters
• .k-i-data-csv

.

• .k-i-data-json

.

• .k-я-данные-sql
• .k-i-data-web

.

• .k-i-group-collection

.

• .k-я-параметр-логический
• .k-я-параметр-дата-время
• .k-i-параметр-float
• .k-i-параметр-целое число
• .k-i-строка-параметров
• .k-i-параметры-байтовый-массив
• .k-я-параметры-неизвестно
• .k-i-toc-section-level

.

• .k-i-унаследовано
• .k-я-файл-видео
• .k-я-файл-аудио
• .k-i-файл-образ
• .k-i-файл-презентация
• .k-я-файл-данные
• .k-я-файл-образ диска
• .k-i-файл-программирование
• .k-я-файл-ошибка
• .k-я-файлы-ошибка
• .k-i-data-rest
• .k-i-файл-машинописный текст

Изображений

• .k-i-photo-camera

.

• .k-i-image
  .k-i-photo
• .k-i-images
• .k-i-image-export
  .k-i-photo-export
• .k-i-zoom-фактический размер
• .k-i-zoom-best-fit
• .k-я-изображение-изменение размера
• .k-i-crop
• .k-i-зеркало
• .k-i-flip-horizontal
• .k-i-flip-vertical
• .k-i-rotate
• .k-i-rotate-right
• .k-i-rotate-left
• .k-i-brush

.

• .k-i-palette
• .k-i-paint
  .k-i-droplet
  .k-i-background

.

• .k-i-line
  .k-i-shape-line
• .k-i-яркость-контраст
• .k-я-насыщенность
• .k-я-инвертировать цвета
• .k-i-transperancy
  .k-i-opacity
• .k-i-greyscale
• .k-i-blur
• .k-i-точилка
• .k-i-shape
• .k-i-round-corners

.

• .k-i-front-element
• .k-i-back-element
• .k-i-forward-element
• .k-i-backward-element
• .k-i-align-left-element
• .k-i-align-center-element
• .k-i-align-right-element
• .k-i-align-top-element
• .k-i-align-средний-элемент
• .k-i-align-bottom-element
• .k-i-align-stretch-element-horizontal

.

• .k-i-align-stretch-element-vertical

.

• .k-i-align-align-left-elements
• .k-i-align-center-elements
• .k-i-align-right-elements
• .k-i-align-stretch-elements-horizontal

.

• .k-i-align-baseline-horizontal
• .k-i-align-top-elements
• .k-i-align-middle-elements
• .k-i-align-bottom-elements
• .k-i-align-stretch-elements-vertical

.

• .k-i-align-baseline-vertical
• .k-i-justify-start-horizontal
• .k-i-justify-center-horizontal
• .k-i-justify-end-horizontal
• .k-i-justify-between-horizontal
• .k-i-justify-around-horizontal
• .k-i-justify-start-вертикальный
• .k-i-justify-center-vertical
• .k-i-justify-end-vertical
• .k-i-justify-between-vertical
• .k-i-justify-around-vertical
• .k-i-thumbnail-up
• .k-i-thumbnail-right
• .k-i-thumbnail-down
• .k-i-thumbnail-left
• .k-i-full-screen
  .k-i-full-screen
• .k-i-full-screen-exit
  .k-i-full-screen-exit
• .k-i-reset-color
  .k-i-paint-remove
  .k-i-background-remove
• .k-i-align-to-grid

.

• .k-i-size-to-grid
• .k-i-make-same-size

.

• .k-i-make-same-width
• .k-i-make-same-height
• .k-i-make-horizontal-spacing-equal
• .k-i-Увеличить расстояние по горизонтали
• .k-i-reduce-horizontal-spacing
• .k-i-remove-horizontal-spacing
• .k-i-make-vertical-spacing-equal
• .k-i-увеличить-вертикальный-интервал
• .k-i-reduce-vertical-spacing
• .k-i-remove-vertical-spacing
• .k-i-eyedropper

.

• .k-i-snap-сетка
• .k-i-snap-to-gridlines

.

• .k-i-snap-to-snaplines

.

• .k-i-sizes
• .k-i-color-canvas

Схема и навигация

• .k-i-arrow-45-вверх-вправо
  .k-i-collapse-ne
  .k-i-resize-ne
• .k-i-arrow-45-down-right
  .k-i-collapse-se
  .k-i-resize-se
• .k-i-arrow-45-down-left
  .k-i-collapse-sw
  .k-i-resize-sw
• .k-i-arrow-45-up-left
  .k-i-collapse-nw
  .k-i-resize-new
• .k-i-arrow-60-up
  .k-i-kpi-trend-увеличение
• .k-i-arrow-60-right
• .k-i-arrow-60-down
  .k-i-kpi-тренд-уменьшение
• .k-i-arrow-60-слева
• .k-i-arrow-end-вверх
• .k-i-arrow-end-right
• .k-i-arrow-end-down
• .k-i-arrow-end-left
• .k-i-arrow-double-60-up
• .k-i-arrow-seek-up
• .k-i-arrow-double-60-right
  .k-i-forward-sm
• .k-i-arrow-seek-right
• .k-i-arrow-double-60-down
• .k-i-arrow-seek-down
• .k-i-arrow-double-60-left
  .k-i-rewind-sm
• .k-i-стрелки-kpi
  . k-i-kpi
• .k-i-arrow-no-change
• .k-i-arrow-overflow-вниз
• .k-i-arrow-chevron-up
• .k-i-arrow-chevron-right
• .k-i-arrow-chevron-down
• .k-i-arrow-chevron-left
• .k-i-arrow-up
• .k-i-arrow-right
• .k-i-arrow-down
• .k-i-arrow-left
• .k-i-arrow-дрель
• .k-i-arrow-parent
• .k-я-стрелка-корень
• .k-i-стрелки-изменение размера
• .k-i-стрелки-размеры
• .k-i-стрелки-своп
• .k-i-drag-and-drop
• .k-i -ategorize
• .k-i-grid
• .k-i-grid-layout
• .k-i-group
• .k-i-ungroup
• .k-i-handler-drag

.

• .k-i-layout
• .k-i-layout-1-by-4
• .k-i-layout-2-by-2
• .k-i-layout-бок о бок
• .k-i-layout-stacked
• .k-i-columns
• .k-i-rows
• .k-i-reorder
• .k-i-menu
• .k-i-more-vertical
• .k-i-more-horizontal
• .k-i-home
• .k-i-overlap

Отображение

• .k-i-global-outline
• .k-i-глобус
• .k-i-marker-pin

.

• .k-i-marker-pin-target
• .k-я-контактный
• .k-i-unpin

Медиа

• .k-i-play
• .k-i-pause
• .k-i-stop
• .k-i-rewind
• .k-i-forward
• .k-i-volume-down
• .k-i-volume-вверх
• .k-i-volume-off
• .k-i-hd
• .k-i-субтитры
• .k-i-плейлист
• .k-i-audio

Социальный обмен

• .к-я-акция
• .k-i-user
• .k-i-inbox
• .k-i-blogger

.

• .k-i-blogger-box

.

• .k-я-вкусный
• .k-i-Delicious-box
• .k-i-digg
• .k-i-digg-box

.

• .k-i-email
  .k-i-envelop
  .k-i-letter
• .k-i-email-box
  .k-i-envelop-box
  .k-i-letter-box
• .k-i-facebook
• .k-i-facebook-box

.

• .k-i-google
• .k-i-google-box

.

• .k-i-google-plus
• .k-i-google-plus-box

.

• .k-i-linkedin
• .k-i-linkedin-box
• .k-i-myspace
• .k-i-myspace-box
• .k-i-pinterest

.

• .k-i-pinterest-box

.

• .k-i-reddit

.

• .k-i-reddit-box

.

• .k-я-наткнулся на
• .k-i-stumble-on-box
• .к-я-расскажи-другу
• .k-i-tell-a-friend-box
• .k-i-tumblr
• .k-i-tumblr-box
• .k-i-twitter
• .k-i-twitter-box

.

• .k-i-yammer

.

• .k-i-yammer-box
• .k-я-поведение
• .k-i-behaviornce-box

.

• .k-i-dribbble
• .k-i-dribbble-box

.

• .k-i-rss

.

• .k-i-rss-box

.

• .k-i-vimeo

.

• .k-i-vimeo-box
• .k-i-youtube

.

• .k-i-youtube-box

.

Переключить

• .k-i-heart-outline
  .k-i-fav-outline
  .k-i-избранное-outline
• .k-i-heart
  .k-i-fav
  .k-i-любимый
• .k-i-star-outline
  .k-i-bookmark-outline
• .k-i-star
  .k-i-bookmark

.

• .k-i-checkbox
  .k-i-shape-rect
• .k-i-checkbox-checked
• .k-i-tri-state-undeterminate
• .k-i-tri-state-null
• .k-i-circle
• .k-i-radiobutton
  .k-i-shape-circle
• .k-i-radiobutton-checked

Графики

• .k-i-graph
• .k-i-кластеризованный по столбцам
• .k-i-column-stacked
• .k-i-column-stacked100
• .k-i-диапазон-столбцов
• .k-i-bar-кластеризованный
• .k-i-bar-stacked
• .k-i-bar-stacked100
• .k-i-bar-диапазон
• .k-i-кластеризованная область
• .k-i-area-stacked
• .k-i-area-stacked100
• .k-i-area-range
• .k-i-line-stacked
• .k-i-line-stacked100
• .k-i-line-markers

.

• .k-i-line-stacked-markers

.

• .k-i-line-stacked100-markers
• .k-i-pie
• .k-i-donut
• .k-i-scatter
• .k-i-scatter-smooth-lines-markers

.

• .k-i-scatter-smooth-lines
• .k-i-scatter-прямые-маркеры
• .k-i-scatter-прямые
• .k-i-bubble

.

• .k-i-подсвечник
• .k-i-bar
• .k-i-radar
• .k-i-radar-markers

.

• .k-i-радар-заполненный
• .k-i-rose
• .k-i-choropleth

.

Stop Use Icon Fonts by Michael Irigoyen

Всего за год до того, как в 1991 году была запущена первая веб-страница, Microsoft начала поставлять, пожалуй, самый известный иконочный шрифт, Wingdings .Однако прошло почти 22 года, прежде чем иконочные шрифты стали тенденцией дизайна в Интернете.

Введение at-правила @ font-face CSS позволило веб-дизайнерам указывать собственные шрифты для отображения текста. К 2011 году его поддерживали все основные браузеры. Это породило идею о том, что шрифты, состоящие из пиктограмм, такие как Wingdings , можно использовать вместо растровых изображений в Интернете. Учитывая, что реальная поддержка SVG во всех основных браузерах не была стабильной до начала 2020 года, иконочные шрифты фактически были способом добавления векторных иконок на ваш веб-сайт.

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

Flawed Icon Fonts

Flash of Unstyled Content (FOUC)

При использовании @ font-face вы даете браузеру команду сделать HTTP-запрос для требуемого файла шрифта. Этот запрос также не отправляется немедленно. Когда браузер начинает анализировать HTML и все связанные файлы, указанные в разметке, он строит объектную модель документа (DOM) в реальном времени.Когда связанный шрифт найден, запрос запускается. Время, необходимое для извлечения шрифта, может зависеть от размера ресурса шрифта, условий сети и оборудования пользователя.

В ожидании ресурса шрифта браузер выберет отображение текстового содержимого HTML перед фактическим его получением. Это приводит к появлению нестилизованного содержимого (FOUC). Эти вспышки могут сильно раздражать ваших посетителей. Иконочные шрифты обычно назначают свои глифы кодовым точкам за пределами нормального диапазона, в котором работает большинство обычных шрифтов.Однако в противном случае возможно, что вместо значков появятся случайные символы или глифы до того, как шрифт будет полностью загружен.

Примечание : можно использовать более новые директивы, такие как preload , в ресурсах шрифтов, чтобы избежать FOUC. Однако это не решает всех других проблем, описанных в этой статье, и не рекомендуется.

Доступность

Иконочные шрифты, как известно, плохо подходят для доступа и могут вызвать разочарование у тех, кто полагается на вспомогательные технологии.

1. Обрабатывается как текст — Браузер обрабатывает шрифты как текст, потому что именно так и должны быть шрифты. С годами программы чтения с экрана становились все умнее, но им все еще трудно различать, что такое разборчивый текст, а что — пиктограмма. Большинство программ чтения с экрана будут читать вслух текст, вставленный с помощью CSS, поэтому, когда они сталкиваются с вашими значками, они могут сказать «непроизносимо» или могут быть полностью пропущены.

2. Таблица стилей переопределяет — Люди с нарушениями зрения часто используют настраиваемые таблицы стилей для переопределения стилей по умолчанию для посещаемых ими веб-сайтов, чтобы упростить их использование.Это может включать изменение цветовых схем, увеличение размера или веса шрифта или даже полное изменение начертания шрифта. Если ваш сайт использует значки неконтекстным образом, кто-то, использующий вспомогательный шрифт (например, OpenDyslexic), заставит ваши значки заменить и полностью исчезнуть, что потенциально сделает ваш веб-сайт непригодным для использования.

3. Невозможно предоставить метаданные — Процесс реализации шрифта значка в Интернете требует использования псевдоэлементов :: before или :: after .Семантически псевдоэлементы :: before и :: after предназначены для добавления косметического содержимого к существующему элементу. Для шрифтов значков это имеет смысл, если значок используется в контексте с другим элементом. Однако во многих случаях значок используется в качестве основного элемента. Например, «х» для «закрыть» или дом для возвращения «домой». Сами по себе эти значки не предоставляют никакой семантической информации об их содержании; Вы не можете дать им ярлыки или описать их напрямую.

Размер и ремонтопригодность

Иконочные шрифты — недешевый актив. Каждый раз, когда посетитель загружает ваш значок-шрифт, он загружает все значки, которые вы собираетесь использовать в любом месте вашего сайта, независимо от того, видят они их все или нет. Уже сам по себе этот факт делает работу со шрифтами иконок сложными и довольно раздражающими. Если ваш шрифт значков содержит 200 значков, а вы используете 10 из них, вы заставляете посетителей загружать 190 значков, которые они никогда не увидят. Это ухудшит впечатления вашего посетителя из-за увеличения времени загрузки и увеличения FOUC.

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

Ухудшение визуального качества

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

Трудно стилизовать / позиционировать

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

SVG спешат на помощь!

С выпуском версии браузера Microsoft Edge на базе Chromium в начале 2020 года масштабируемая векторная графика (SVG) стала полностью поддерживаться во всех основных браузерах. Даже до этого SVG поддерживались во всех браузерах с 2012 года, хотя и с некоторыми оговорками в отношении масштабирования в Internet Explorer и до Chromium Edge. И угадай что? SVG — это потрясающих значков для веб-сайтов!

Иконки Just Work

Данные изображения SVG хранятся непосредственно в вашем HTML-документе.Как только браузер обрабатывает его, он отображает его. Вам не нужно ждать завершения других HTTP-запросов, как в случае со шрифтом значка.

Лучшая доступность

SVG имеют встроенные функции специальных возможностей, которые дают им преимущество перед использованием шрифтов со значками.

• Это семантически элементы изображения.
• Предоставить метаданные очень просто. Просто укажите элемент