Шрифтовые иконки: 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 имеют встроенные функции специальных возможностей, которые дают им преимущество перед использованием шрифтов со значками.

  • Это семантически элементы изображения.
  • Предоставить метаданные очень просто. Просто укажите элемент </code> или <code> <desc> </code> в своем контейнере SVG. Программы чтения с экрана подберут эти значения и прочитают что-нибудь полезное для вашего посетителя.А поскольку SVG — это просто элементы в вашем HTML, вы можете легко использовать атрибуты ARIA, такие как <code> aria-labelledby </code>. </li> </ul> <h4 tabindex="-1"><span class="ez-toc-section" id="%D0%9B%D0%B5%D0%B3%D1%87%D0%B5_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%B2%D0%B0%D1%82%D1%8C"></span> Легче поддерживать <span class="ez-toc-section-end"></span></h4> <p> По сравнению с индивидуальным подходом, коллекция из 100 SVG по сравнению с WOFF2 из 100 значков-глифов будет больше. Однако преимущества SVG легко перевешивают реализацию шрифта значка. </p> <p> С SVG вы будете включать только значки, необходимые для этой отдельной страницы, непосредственно в свой код. Самый эффективный способ сделать это — использовать элемент SVG <code> <defs> </code> для однократного определения ваших значков, а затем ссылаться на них с помощью элемента <code> <use> </code>.Вы также можете напрямую встроить свои значки SVG, однако, если вы используете один и тот же значок несколько раз на одной странице, вы просто увеличиваете общий вес страницы. </p> <blockquote> <p> <strong> Примечание: </strong> Если вы создаете одностраничное приложение (SPA), обязательно изучите правильные методы разделения кода, чтобы уменьшить размеры пакетов. </p> </blockquote> <p> Еще одно преимущество состоит в том, что вам не нужно поддерживать шрифт и поддерживающие его файлы CSS за пределами вашего сайта. Обычной практикой для тех, кто использует шрифты для значков, является выделение нужных значков и восстановление меньшего шрифта, включающего только эти значки.Использование значков SVG позволяет делать это в базе кода без необходимости создания ресурсов шрифтов во внешних инструментах. </p> <h4 tabindex="-1"><span class="ez-toc-section" id="%D0%A7%D0%B5%D1%82%D0%BA%D0%B8%D0%B5_%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F"></span> Четкие изображения <span class="ez-toc-section-end"></span></h4> <p> SVG — это прямые векторные изображения. Методы сглаживания, используемые вашим браузером или операционной системой для текста, не влияют на SVG, и ваши значки будут заметно четче. </p> <h4 tabindex="-1"><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%BB%D0%BD%D1%8B%D0%B9_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82_%D1%83%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F_CSS"></span> Полный элемент управления CSS <span class="ez-toc-section-end"></span></h4> <p> С SVG у вас есть доступ ко всем тем же элементам управления CSS, что и со шрифтом, и многому другому! Вы можете напрямую указать определенные части значка, состоящего из нескольких частей, и применить к каждой из них свой стиль.Вы также можете использовать элементы управления CSS, специфичные для SVG, например свойство <code> stroke </code>. </p> <p> Кроме того, SVG просто имеют размер. На них не влияют текстовые правила CSS. </p> <h4 tabindex="-1"><span class="ez-toc-section" id="%D0%94%D1%80%D1%83%D0%B3%D0%B8%D0%B5_%D1%81%D0%BE%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F"></span> Другие соображения <span class="ez-toc-section-end"></span></h4> <p> Чтобы полностью поддержать использование SVG на своем сайте, убедитесь, что вы следуете другим распространенным рекомендациям: </p> <ul> <li> <strong> Оптимизируйте свои SVG </strong> — Запустите изображения SVG через оптимизатор, чтобы уменьшить размер. (Большинство, если не все библиотеки значков, которые предлагают пакеты SVG, делают это по умолчанию.) </li> <li> <strong> Включить сжатие </strong> — Настройте свой сервер для отправки всех текстовых ресурсов (HTML, JS, CSS) с помощью Brotli (или GZIP). Это будет включать данные SVG в ваши файлы HTML и / или JS. </li> <li> <strong> Кэшировать эффективно </strong> — Установите соответствующие заголовки кеширования, чтобы посетители загружали файлы только по мере их изменения. Поскольку ваши SVG-файлы будут частью ваших файлов HTML и / или JS, вам нужно, чтобы посетители загружали их снова, только если они изменятся. </li> </ul> <h3 tabindex="-1"><span class="ez-toc-section" id="%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B_%D1%81%D0%BE_%D0%B7%D0%BD%D0%B0%D1%87%D0%BA%D0%B0%D0%BC%D0%B8_SVG"></span> Начало работы со значками SVG <span class="ez-toc-section-end"></span></h3> <p> Большинство основных библиотек значков предлагают пакеты библиотеки SVG.Две популярные библиотеки значков, Material Design Icons и Font Awesome, содержат пакеты, которые вы можете установить через <code> npm </code>. </p> <p> Если вы используете фреймворк, многие из основных библиотек значков также выпустили пакеты для наиболее популярных, так что вы можете начать работу довольно быстро. Например, если вы используете React, и у Material Design, и у Font Awesome есть простые решения: </p> <ul> <li> <p> <strong> Material Design Icons </strong> — @ mdi / react & @ mdi / js </p> <pre> <code> import Icon from '@ mdi / реагировать '; импортировать {mdiCoffee} из '@ mdi / js'; константный элемент = <Путь к значку = {mdiCoffee} size = {1} />; </code> </pre> </li> <li> <p> <strong> Font Awesome </strong> — @ fortawesome / react-fontawesome & @ fortawesome / free-solid-svg-icons </p> <pre> <code> импорт {FontAwesomeIcon} из '@ fortawesome / react-fontawesome'; импортировать {faCoffee} из '@ fortawesome / free-solid-svg-icons'; const element = <FontAwesomeIcon icon = {faCoffee} />; </code> </pre> </li> </ul> <blockquote> <p> <strong> Примечание: </strong> Оба этих решения объединяют только значки, которые вы используете, из-за тряски дерева.</p> </blockquote> <h3 tabindex="-1"><span class="ez-toc-section" id="%D0%97%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5"></span> Заключение <span class="ez-toc-section-end"></span></h3> <p> Продолжение использования шрифтов для иконок — это вред для посетителей и время для вас. Заменяя существующую реализацию шрифта значков на значки SVG, вы помогаете людям использовать вспомогательные технологии, улучшая качество, четкость и надежность ваших значков и сокращая время на поддержку устаревших ресурсов. И если вы случайно наткнулись на эту статью, пытаясь определить, следует ли вам использовать иконочный шрифт или нет, я надеюсь, что ответ теперь очевиден.</p> <h2><span class="ez-toc-section" id="%D0%A1%D0%B5%D0%BC%D0%B0%D0%BD%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D0%B8%D0%B4%D0%B5%D0%BD%D1%82%D0%B8%D1%84%D0%B8%D0%BA%D0%B0%D1%86%D0%B8%D1%8F_%D0%B7%D0%BD%D0%B0%D1%87%D0%BA%D0%B0_%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%B0_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_role_%C2%ABimg%C2%BB"></span> Семантическая идентификация значка шрифта с помощью role = «img» <span class="ez-toc-section-end"></span></h2> <h3><span class="ez-toc-section" id="%D0%9E%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5"></span> Описание <span class="ez-toc-section-end"></span></h3> <p> Цель этого метода — показать, как семантически идентифицировать элемент.<br /> который использует файл шрифта для значков. Когда пользователь переопределяет семейство шрифтов, эти значки обычно<br /> исчезнут, если нет возможности их идентифицировать. Дело в том, чтобы предоставить технику<br /> чтобы отличать шрифты значков от общего использования шрифтов (текста). </p> <p> Некоторым пользователям с ослабленным зрением требуются пользовательские таблицы стилей, сценарии или расширения для переопределения<br /> шрифты на странице для восприятия текстового содержимого.Однако они должны уметь воспринимать<br /> значимые шрифты, такие как звездочка, обозначающая избранное, или электронное письмо<br /> значок в ссылке. </p> <p> Ключ предназначен для того, чтобы автор семантически размечал шрифты значков с помощью <code> role = "img" </code>. Затем селектор замены шрифта пользователя может подключиться к этой семантике и исключить<br /> <code> роль = "img" </code>. Это приводит к отображению этих значков шрифтов. </p> <p> Первый шаг используется для добавления начертания шрифта с иконками через файл CSS.= «icon-«],<br /> [класс * = «значок-«] {семейство шрифтов: ‘IconFontRoleImg’! important; }</p> <p>/ * конкретный класс для значка * /<br /> .icon-star-bg: до {содержимого: «\ e982»; }<br /> </code></p> <p> На втором этапе добавляются классы, атрибут role = «img» для семантики и доступный<br /> имя. </p> <pre> <code> <! - Значок через имена классов, role = "img" и текстовую альтернативу -> <p> <span role = "img" aria-label = "Favorite"> </span> </p> </code> </pre> <p> На третьем этапе используется селектор «: not» в сочетании с «селектором [атрибут]»<br /> для замены начертания шрифта только для обычного текста.</p> <pre> <code> / * Заменяет начертание шрифта, но исключает все элементы с атрибутом role = "" img "* / *: not ([role = "img"]) {семейство шрифтов: Verdana, sans-serif! important; } </code> </pre> <h2><span class="ez-toc-section" id="Icon_Fonts_-_Vuetify"></span> Icon Fonts — Vuetify <span class="ez-toc-section-end"></span></h2> <p> Vuetify поставляется с начальной загрузкой с поддержкой значков Material Design, Material Icons, Font Awesome 4 и Font Awesome 5. По умолчанию приложения будут использовать значки Material Design по умолчанию. </p> <h3><span class="ez-toc-section" id="_%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%BE%D0%B2_%D0%B7%D0%BD%D0%B0%D1%87%D0%BA%D0%BE%D0%B2"></span> # Установка шрифтов значков <span class="ez-toc-section-end"></span></h3> <p> Вы должны включить указанную библиотеку значков (даже если используется по умолчанию).Это можно сделать, включив ссылку на CDN или импортировав библиотеку значков в ваше приложение. </p> <h4><span class="ez-toc-section" id="_%D0%97%D0%BD%D0%B0%D1%87%D0%BA%D0%B8_%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B0_%D0%BC%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D0%B0%D0%BB%D0%BE%D0%B2"></span> # Значки дизайна материалов <span class="ez-toc-section-end"></span></h4> <p> Используйте этот инструмент для поиска любых значков дизайна материалов и копирования их в буфер обмена, щелкнув элемент. </p> <p> Это шрифт значков по умолчанию для Vuetify. Вы можете включить его через CDN: </p> <pre> <code> <link href = "https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel = "stylesheet" > </code> </pre> <p> Или как локальная зависимость: </p> <pre> <code> $ yarn add @ mdi / font -D // ИЛИ $ npm install @ mdi / font -D </code> </pre> <pre> <code> import '@ mdi / font / css / materialdesignicons.css ' импортировать Vue из 'vue' импортировать Vuetify из vuetify / lib Vue.use (Vuetify) экспортировать новый Vuetify по умолчанию ({ icons: { iconfont: 'mdi', }, }) </code> </pre> <h4><span class="ez-toc-section" id="_%D0%97%D0%BD%D0%B0%D1%87%D0%BA%D0%B8_%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B0_%D0%BC%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D0%B0%D0%BB%D0%BE%D0%B2_-_JS_SVG"></span> # Значки дизайна материалов — JS SVG <span class="ez-toc-section-end"></span></h4> <p> Используйте пути SVG, указанные в @ mdi / js. Это рекомендуемая установка при оптимизации вашего приложения для производства. Вам нужно включить ТОЛЬКО <strong> </strong>, если вы планируете использовать больше значков по умолчанию. </p> <pre> <code> $ пряжа добавить @ mdi / js -D // ИЛИ $ npm install @ mdi / js -D </code> </pre> <p> Укажите <strong> mdiSvg </strong> iconfont: </p> <pre> <code> импортировать Vue из 'vue' импортировать Vuetify из vuetify / lib Vue.использовать (Vuetify) экспортировать новый Vuetify по умолчанию ({ icons: { iconfont: 'mdiSvg', }, }) </code> </pre> <p> Вы можете настраивать импорт только используемых вами значков, предоставляя гораздо меньший размер пакета. </p> <pre> <code> <шаблон> <v-icon> {{svgPath}} </v-icon> </template> <сценарий> импортировать {mdiAccount} из '@ mdi / js' экспорт по умолчанию { данные: () => ({ svgPath: mdiAccount }), } </script> </code> </pre> <h4><span class="ez-toc-section" id="_%D0%97%D0%BD%D0%B0%D1%87%D0%BA%D0%B8_%D0%BC%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D0%B0%D0%BB%D0%BE%D0%B2"></span> # Значки материалов <span class="ez-toc-section-end"></span></h4> <p> Установка такая же, как описано выше.Для проектов без процесса сборки рекомендуется импортировать значки из CDN </p> <pre> <code> <link href = "https://fonts.googleapis.com/css?family=Material+Icons" rel = "stylesheet"> </code> </pre> <p> В качестве альтернативы можно установить локально, используя пряжу или NPM. Имейте в виду, что это не официальный репозиторий Google и может не получать обновления </p> <pre> <code> $ yarn add material-design-icons-iconfont -D // ИЛИ $ npm установить материал-дизайн-значки-значок-шрифт -D </code> </pre> <p> После установки пакета импортируйте его в свой основной файл js.Обычно это <code> main.js </code>, <code> index.js </code> или <code> app.js </code>, расположенный в папке <code> src / </code>. Если вы используете приложение SSR, у вас может быть файл <code> client.js </code> или <code> entry-client.js </code>. </p> <pre> <code> import 'material-design-icons-iconfont / dist / material-design-icons.css' импортировать Vue из 'vue' импортировать Vuetify из vuetify / lib Vue.use (Vuetify) экспортировать новый Vuetify по умолчанию ({ icons: { iconfont: 'md', }, }) </code> </pre> <h4><span class="ez-toc-section" id="_Font_Awesome_4_Icons"></span> # Font Awesome 4 Icons <span class="ez-toc-section-end"></span></h4> <p> То же, что и выше.Самый простой способ проверить это в своем проекте — установить FontAwesome через cdn: </p> <pre> <code> <link href = "https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome. min.css "rel =" stylesheet "> </code> </pre> <p> Установка FontAwesome <strong> 4 </strong> такая же, как и его более новая версия, только из другого репозитория. Вы будете нацелены на репо </code> с потрясающим шрифтом <code>, а не на <code> @fortawesome </code>. </p> <pre> <code> $ пряжа добавить font-awesome@4.7.0 -D // ИЛИ $ npm установить font-awesome@4.7.0 -D </code> </pre> <p> Не забывайте, ваш проект должен распознавать CSS. Если вы используете webpack, установите и настройте загрузчик css. </p> <pre> <code> импортировать 'font-awesome / css / font-awesome.min.css' импортировать Vue из 'vue' импортировать Vuetify из vuetify / lib Vue.use (Vuetify) экспортировать новый Vuetify по умолчанию ({ icons: { iconfont: 'fa4', }, }) </code> </pre> <h4><span class="ez-toc-section" id="_Font_Awesome_5_Icons"></span> # Font Awesome 5 Icons <span class="ez-toc-section-end"></span></h4> <p> Самый простой способ начать работу с <strong> FontAwesome </strong> - использовать компакт-диск.В заголовке вашего основного <code> index.html </code> поместите этот фрагмент: </p> <pre> <code> <link href = "https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel = "stylesheet" > </code> </pre> <p> Для локальной установки вы можете загрузить бесплатную версию <strong> FontAwesome </strong>, используя предпочитаемый вами менеджер пакетов: </p> <pre> <code> $ yarn add @ fortawesome / fontawesome-free -D // ИЛИ $ npm install @ fortawesome / fontawesome-free -D </code> </pre> <p> В основной точке входа просто импортируйте <strong> всех пакетов.css </strong>. Если вы используете настроенный проект webpack, вам необходимо настроить поддержку файлов <code> .css и </code> с помощью загрузчика css webpack. Если вы уже используете Vue CLI, это будет сделано автоматически. </p> <pre> <code> импортировать '@ fortawesome / fontawesome-free / css / all.css' импортировать Vue из 'vue' импортировать Vuetify из vuetify / lib Vue.use (Vuetify) экспортировать новый Vuetify по умолчанию ({ icons: { iconfont: 'fa', }, }) </code> </pre> <h4><span class="ez-toc-section" id="_Font_Awesome_SVG_Icons"></span> # Font Awesome SVG Icons <span class="ez-toc-section-end"></span></h4> <p> Добавьте необходимые зависимости.</p> <pre> <code> $ yarn add @ fortawesome / fontawesome-svg-core @ fortawesome / vue-fontawesome @ fortawesome / free-solid-svg-icons -D // или $ npm install @ fortawesome / fontawesome-svg-core @ fortawesome / vue-fontawesome @ fortawesome / free-solid-svg-icons -D </code> </pre> <p> Затем добавьте глобально <code> font-awesome-icon </code> компонент и установите <code> faSvg </code> как iconfont в конфигурации Vuetify. </p> <pre> <code> импортировать Vue из 'vue' импортировать Vuetify из vuetify / lib импортировать {библиотеку} из '@ fortawesome / fontawesome-svg-core' импортировать {FontAwesomeIcon} из '@ fortawesome / vue-fontawesome' импортировать {fas} из '@ fortawesome / free-solid-svg-icons' Vue.компонент ('font-awesome-icon', FontAwesomeIcon) library.add (fas) Vue.use (Vuetify) экспортировать новый Vuetify по умолчанию ({ icons: { iconfont: 'faSvg', }, }) </code> </pre> <h3><span class="ez-toc-section" id="_%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%B0%D0%B8%D0%B2%D0%B0%D0%B5%D0%BC%D1%8B%D1%85_%D0%B7%D0%BD%D0%B0%D1%87%D0%BA%D0%BE%D0%B2"></span> # Использование настраиваемых значков <span class="ez-toc-section-end"></span></h3> <p> Допустим, ваше приложение вызывает настраиваемый значок в компоненте Vuetify. Вместо того, чтобы создавать компонент-оболочку или вручную определять конкретный значок каждый раз, когда компонент появляется, вы можете настроить его на глобальном уровне. </p> <pre> <code> импортировать Vue из 'vue' импортировать Vuetify из vuetify / lib Vue.использовать (Vuetify) экспортировать новый Vuetify по умолчанию ({ icons: { iconfont: 'fa', ценности: { отменить: 'fas fa-ban', меню: 'fas fa-ellipsis-v', }, }, }) </code> </pre> <p> Вы можете импортировать и назначить svg значению значка. Импортированный svg должен содержать только путь без оболочки <code> <svg> </code>. Для импорта более сложного SVG используйте значок компонента. </p> <pre> <code> импортировать Vue из 'vue' импортировать Vuetify из vuetify / lib импортировать myIconSvg из myIcon.svg Vue.использовать (Vuetify) экспортировать новый Vuetify по умолчанию ({ icons: { iconfont: 'fa', ценности: { customIconSvg: myIconSvg, customIconSvgPath: 'M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c -0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277 , 9.784,14.989,9.491z ', }, }, }) </code> </pre> <p> Если вы используете библиотеку значков, у которой нет предустановки, вы можете создать собственную.</p> <pre> <code> импортировать Vue из 'vue' импортировать Vuetify из vuetify / lib const MY_ICONS = { полный: '...', Отмена: '...', близко: '...', удалять: '...', Чисто: '...', успех: '...', Информация: '...', предупреждение: '...', ошибка: '...', предыдущая: '...', следующий: '...', checkboxOn: '...', checkboxOff: '...', checkboxIndeterminate: '...', разделитель: '...', Сортировать: '...', расширять: '...', меню: '...', подгруппа: '...', падать: '...', radioOn: '...', radioOff: '...', редактировать: '... ', ratingEmpty: '...', ratingFull: '...', ratingHalf: '...', загрузка: '...', первый: '...', последний: '...', развернуть: '...', файл: '...', } Vue.use (Vuetify) экспортировать новый Vuetify по умолчанию ({ icons: { значения: MY_ICONS, }, }) </code> </pre> <h3><span class="ez-toc-section" id="_%D0%9F%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%B8%D0%B5_%D0%B7%D0%BD%D0%B0%D1%87%D0%BA%D0%B8_%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE%D0%BA%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D0%B3%D0%BE_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F"></span> # Пользовательские значки многократного использования <span class="ez-toc-section-end"></span></h3> <p> Vuetify автоматически объединит любые строки значков, предоставленные в пул доступных пресетов. Это позволяет вам создавать настраиваемые строки, которые можно использовать в вашем приложении, просто ссылаясь на глобальные значки <strong> </strong>.</p> <pre> <code> импортировать Vue из 'vue' импортировать Vuetify из vuetify / lib Vue.use (Vuetify) экспортировать новый Vuetify по умолчанию ({ icons: { iconfont: 'mdi', ценности: { продукт: 'mdi-dropbox', поддержка: 'mdi-lifebuoy', steam: 'mdi-steam-box', ПК: 'mdi-desktop-classic', xbox: 'mdi-xbox', playstation: 'mdi-playstation', переключатель: 'mdi-nintendo-switch', }, }, }) </code> </pre> <p> Это может помочь гарантировать, что ваше приложение всегда использует определенный значок с заданной строкой.Вот несколько способов использования <code> <v-icon> </code> с этой системой. </p> <pre> <code> <шаблон> <div> <v-icon> $ vuetify.icons.product </v-icon> <v-icon> $ product </v-icon> <v-icon v-text = "'$ vuetify.icons.support'"> </v-icon> <v-icon v-text = "'$ support'"> </v-icon> <v-icon v-html = "'$ vuetify.icons.steam'"> </v-icon> <v-icon v-html = "'$ steam'"> </v-icon> <v-icon v-text = "platform"> </v-icon> </div> </template> <сценарий> экспорт по умолчанию { данные: () => ({ Пользователь: { имя: 'Джон Лейдер', платформа: 'pc', }, }), вычислено: { Платформа () { вернуть '$' + это.user.platform } } } </script> </code> </pre> <h3><span class="ez-toc-section" id="_%D0%97%D0%BD%D0%B0%D1%87%D0%BA%D0%B8_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2"></span> # Значки компонентов <span class="ez-toc-section-end"></span></h3> <p> Вместо предоставленных предустановок шрифтов значков вы можете использовать собственные значки компонентов. Вы также можете переключать значки, которые используются в компоненте Vuetify, на свои собственные. </p> <pre> <code> импортировать Vue из 'vue' импортировать Vuetify из vuetify / lib импортировать IconComponent из './IconComponent.vue' Vue.use (Vuetify) экспортировать новый Vuetify по умолчанию ({ icons: { ценности: { продукт: { компонент: IconComponent, props: { имя: 'продукт', }, }, }, }, }) </code> </pre> <p> Если вы хотите, чтобы ваш значок SVG правильно наследовал цвета и масштаб, обязательно добавьте к нему следующий CSS: </p> <pre> <code>.ваш-svg-icon fill: currentColor </code> </pre> <h3><span class="ez-toc-section" id="_%D0%9E%D1%82%D1%81%D1%83%D1%82%D1%81%D1%82%D0%B2%D1%83%D1%8E%D1%82_%D0%B7%D0%BD%D0%B0%D1%87%D0%BA%D0%B8_%D0%BC%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D0%B0%D0%BB%D0%BE%D0%B2"></span> # Отсутствуют значки материалов <span class="ez-toc-section-end"></span></h3> <p> Некоторые значки материалов по умолчанию отсутствуют. Например, <code> человек </code> и <code> person_outline </code> доступны, но <code> visibility_outline </code> - нет, а <code> видимость </code> - есть. Чтобы использовать отсутствующие значки материалов, добавьте шрифт ниже (удалите другой шрифт материала, если он уже зарегистрирован). </p> <pre> <code> <ссылка rel = "таблица стилей" href = "https: //fonts.googleapis.com / css? family = Материал + Иконки | Материал + Иконки + Контур | Материал + Иконки + Два + Тон | Материал + Иконки + Круглый | Материал + Иконки + Sharp » /> </code> </pre> <p> Вы можете добавить свой собственный компонент. Допустим, это <strong> @ / components / MaterialIcon.vue </strong>. </p> <pre> <code> <шаблон> <i: class = "standardClass"> {{parsed.id}} </i> </template> <сценарий> экспорт по умолчанию { props: { имя: { тип: String } }, вычислено: { parsed () { const check = (customSuffixes, standardSuffix) => { for (пусть суффикс customSuffixes) { суффикс = `_ $ {суффикс}` если это.name.endsWith (суффикс)) { возвращение { суффикс: стандартный id: this.name.substring (0, this.name.indexOf (суффикс)) } } } вернуть ложь } возвращение ( check (['заполнить', 'заполнить'], '') || check (['контур', 'контур'], 'контур') || check (['двухцветный', 'двухцветный'], 'двухцветный') || check (['круглый', 'округленный'], 'круглый') || check (['Sharpened'], 'Sharpened') || { суффикс: '', id: это.имя } ) }, standardClass () { if (this.parsed.suffix) { return `material-icons - $ {this.parsed.suffix}` } вернуть 'material-icons' } } } </script> </code> </pre> <p> Затем вам нужно зарегистрировать точные значки материалов, которые вы хотите. </p> <pre> <code> импорт Vue из vue импортировать Vuetify из vuetify / lib импортировать MaterialIcon из '@ / components / MaterialIcon' function missingMaterialIcons (ids) { const icons = {} for (const id идентификаторов) { for (константный суффикс ['заливка', 'контур', 'двухцветный', 'круглый', 'резкий']) { const name = `$ {id} _ $ {суффикс}` значки [имя] = { компонент: MaterialIcon, props: { имя } } } } вернуть значки } Vue.используйте (Vuetify, { icons: { ценности: { ... missingMaterialIcons (['видимость', 'видимость_выкл']) } } }) </code> </pre> <p> Наконец, вы можете использовать такие значки материалов. </p> <pre> <code> <v-текстовое поле label = "пароль" : append-icon = " pwShow ? "$ visibility_outline" : '$ visibility_off_outline' " @click: append = "pwShow =! pwShow" : type = "pwShow? 'text': 'password'" /> <v-icon> $ visibility_outline </v-icon> </code> </pre> <h3><span class="ez-toc-section" id="%D0%93%D0%BE%D1%82%D0%BE%D0%B2%D1%8B_%D0%BA_%D0%B1%D0%BE%D0%BB%D1%8C%D1%88%D0%B5%D0%BC%D1%83"></span> Готовы к большему? <span class="ez-toc-section-end"></span></h3> <p> Продолжайте обучение, просматривая связанный контент, выбранный Командой, или перемещайтесь между страницами с помощью навигационных ссылок ниже.</p> <hr role="separator" aria-orientation="horizontal"/> Редактировать эту страницу на GitHub </p> <p> Последнее обновление: 29.11.2021, 5:14:51 </p> <h2><span class="ez-toc-section" id="%D0%A8%D1%80%D0%B8%D1%84%D1%82_Segoe_Fluent_Icons_-_%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F_%D0%B4%D0%BB%D1%8F_Windows"></span> Шрифт Segoe Fluent Icons - приложения для Windows <span class="ez-toc-section-end"></span></h2> <ul data-bi-name="page info" lang="en-us" dir="ltr"> <li> <time data-article-date="" aria-label="Article review date" datetime="2021-10-04T20:55:00Z" data-article-date-source="git"> 04.10.2021 </time> </li> <li> 17 минут для чтения </li> <li> </li> </ul> <p>Эта страница полезна?</p> <h4><span class="ez-toc-section" id="%D0%9E%D1%86%D0%B5%D0%BD%D0%B8%D1%82%D0%B5_%D1%81%D0%B2%D0%BE%D0%B9_%D0%BE%D0%BF%D1%8B%D1%82"></span> Оцените свой опыт <span class="ez-toc-section-end"></span></h4> <p>да</p> <p>Нет</p> <p>Любой дополнительный отзыв? </p> <p> Отзыв будет отправлен в Microsoft: при нажатии кнопки «Отправить» ваш отзыв будет использован для улучшения продуктов и услуг Microsoft.Политика конфиденциальности. </p> <p> Представлять на рассмотрение </p> <p data-binary-rating-onsubmit-message="main-page-rating-container" tabindex="-1" hidden=""> Спасибо. </p> <h4><span class="ez-toc-section" id="%D0%92_%D1%8D%D1%82%D0%BE%D0%B9_%D1%81%D1%82%D0%B0%D1%82%D1%8C%D0%B5"></span> В этой статье <span class="ez-toc-section-end"></span></h4> <p> В этой статье представлены рекомендации для разработчиков по использованию шрифта Segoe Fluent Icons и перечислены все значки вместе с их значением Unicode и описательным именем. </p> <p> <strong> Важные API </strong>: </p> <h3><span class="ez-toc-section" id="%D0%A1%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D1%8F_%D0%BE_Segoe_Fluent_Icons"></span> Сведения о Segoe Fluent Icons <span class="ez-toc-section-end"></span></h3> <p> Подсказка </p> <p> С выпуском Windows 11 шрифт Segoe Fluent Icons заменит Segoe MDL2 Assets в качестве рекомендуемого шрифта для значков символов.<strong> Segoe MDL2 Assets </strong> по-прежнему будет доступен, но мы рекомендуем обновить ваше приложение, чтобы использовать новые <strong> Segoe Fluent Icons </strong>. </p> <p> Большинство значков, включенных в шрифт <strong> Segoe Fluent Icons </strong>, привязаны к области частного использования Unicode (PUA). Диапазон PUA - это нестандартный диапазон Unicode, который позволяет разработчикам шрифтов определять свои собственные символы. Это полезно при создании символьного шрифта, но создает проблему совместимости, когда <strong> Segoe Fluent Icons </strong> недоступен.</p> <p> Значки шрифта <strong> Segoe Fluent Icons </strong> не предназначены для использования в тексте. Это означает, что некоторые старые «уловки», такие как стрелки прогрессивного раскрытия информации, больше не применяются. Точно так же, поскольку все новые значки имеют одинаковый размер и расположение, их необязательно делать с нулевой шириной; мы убедились, что они работают как набор. </p> <h3><span class="ez-toc-section" id="%D0%9D%D0%B0%D1%81%D0%BB%D0%BE%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B8_%D0%B7%D0%B5%D1%80%D0%BA%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D0%BE%D1%82%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5"></span> Наслоение и зеркальное отображение <span class="ez-toc-section-end"></span></h3> <p> Все глифы в <strong> Segoe Fluent Icons </strong> имеют одинаковую фиксированную ширину с одинаковой высотой и левой исходной точкой, поэтому эффекты наслоения и раскрашивания могут быть достигнуты путем рисования глифов непосредственно друг на друге.В этом примере показан черный контур, нарисованный поверх красного сердца нулевой ширины. </p> </p> <pre> <code> <Сетка> <FontIcon FontFamily = "Иконки Segoe Fluent" Glyph = "& # xEB51;" Foreground = "# C72335" /> <FontIcon FontFamily = "Иконки Segoe Fluent" Glyph = "& # xEB52;" /> </Grid> </code> </pre> <p> Многие значки также имеют зеркальные формы, доступные для использования на языках, использующих направленность текста справа налево, таких как арабский, фарси и иврит. </p> <h3><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B8%D0%BA%D0%BE%D0%BD%D0%BE%D0%BA"></span> Использование иконок <span class="ez-toc-section-end"></span></h3> <p> Если вы разрабатываете приложение на C # / VB / C ++ и XAML, вы можете использовать указанные глифы из Segoe Fluent Icons с перечислением символов.</p> <pre> <code> <SymbolIcon Symbol = "GlobalNavigationButton" /> </code> </pre> <p> Если вы хотите использовать глиф из шрифта <em> Segoe Fluent Icons </em> *, который не включен в перечисление Symbol, используйте <strong> FontIcon </strong>. </p> <pre> <code> <FontIcon FontFamily = "Segoe Fluent Icons" Glyph = "& # xE700;" /> </code> </pre> <p> Вы также можете использовать статический ресурс <code> SymbolThemeFontFamily </code> для доступа к <strong> Segoe Fluent Icons </strong> вместо указания шрифта по имени: </p> <pre> <code> <FontIcon FontFamily = "{StaticResource SymbolThemeFontFamily}" Glyph = "& # xE700;" /> </code> </pre> <h3><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BA_%D0%BC%D0%BD%D0%B5_%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B8%D1%82%D1%8C_%D1%8D%D1%82%D0%BE%D1%82_%D1%88%D1%80%D0%B8%D1%84%D1%82"></span> Как мне получить этот шрифт? <span class="ez-toc-section-end"></span></h3> <ul> <li> В Windows 11: Вам ничего не нужно делать, шрифт идет в комплекте с Windows.</li> <li> В Windows 10: <strong> Segoe Fluent Icons </strong> по умолчанию не включен в Windows 10. Вы можете скачать его здесь. </li> <li> На Mac или другом устройстве: здесь вы можете загрузить <strong> Segoe Fluent Icons </strong> и другие шрифты. Вы можете загрузить шрифт для использования в дизайне и разработке, но не можете отправить его на другую платформу. </li> </ul> <h3><span class="ez-toc-section" id="%D0%A1%D0%BF%D0%B8%D1%81%D0%BE%D0%BA_%D0%B7%D0%BD%D0%B0%D1%87%D0%BA%D0%BE%D0%B2"></span> Список значков <span class="ez-toc-section-end"></span></h3> <p> Имейте в виду, что шрифт <strong> Segoe Fluent Icons </strong> включает намного больше значков, чем мы можем здесь показать.Многие значки предназначены для специальных целей и обычно больше нигде не используются. </p> <p> Примечание </p> <p> Глифы с префиксами от <strong> E0-</strong> до <strong> E5-</strong> (например, E001, E5B1) в настоящее время помечены как устаревшие и поэтому не рекомендуются. </p> <p> В следующих таблицах показаны все глифы <strong> Segoe Fluent Icons </strong> и их соответствующие значения в кодировке Unicode и описательные имена. Выберите диапазон из следующего списка, чтобы просмотреть глифы в соответствии с диапазоном PUA, к которому они принадлежат.</p> <h4><span class="ez-toc-section" id="PUA_E700-E900"></span> PUA E700-E900 <span class="ez-toc-section-end"></span></h4> <p> В следующей таблице глифов отображаются точки Unicode с префиксом от E7- до E9-. </p> <p> К началу </p> <h4><span class="ez-toc-section" id="PUA_EA00-EC00"></span> PUA EA00-EC00 <span class="ez-toc-section-end"></span></h4> <p> В следующей таблице глифов отображаются точки Unicode с префиксом от EA- до EC-. </p> <p> К началу </p> <h4><span class="ez-toc-section" id="PUA_ED00-EF00"></span> PUA ED00-EF00 <span class="ez-toc-section-end"></span></h4> <p> В следующей таблице глифов отображаются точки Unicode с префиксом от ED- до EF-. </p> <p> К началу </p> <h4><span class="ez-toc-section" id="PUA_F000-F200"></span> PUA F000-F200 <span class="ez-toc-section-end"></span></h4> <p> В следующей таблице глифов отображаются точки Unicode с префиксом от F0- до F2-.</p> <p> К началу </p> <h4><span class="ez-toc-section" id="PUA_F300-F500"></span> PUA F300-F500 <span class="ez-toc-section-end"></span></h4> <p> В следующей таблице глифов отображаются точки Unicode с префиксом от F3- до F5-. </p> <p> К началу </p> <h4><span class="ez-toc-section" id="PUA_F600-F800"></span> PUA F600-F800 <span class="ez-toc-section-end"></span></h4> <p> В следующей таблице глифов отображаются точки Unicode с префиксом от F6- до F8-. </p> <p> К началу </p> <p> .</p> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/shriftovye-ikonki-font-awesome-ikonochnyj-shrift-i-css-instrumentarij.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://jumper.su/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message" aria-hidden="true">Обязательные поля помечены <span class="required" aria-hidden="true">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required" aria-hidden="true">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required" aria-hidden="true">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required="required" /></p> <p class="comment-form-email"><label for="email">Email <span class="required" aria-hidden="true">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" required="required" /></p> <p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" /></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='15393' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments --> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://jumper.su/raznoe/oformlenie-ssylok-html-krasivoe-oformlenie-ssylok.html" rel="prev"><span class="screen-reader-text">Previous Post</span><span class="nav-title">Оформление ссылок html: Красивое оформление ссылок</span></a></div><div class="nav-next"><a href="https://jumper.su/raznoe/zashhishhennye-programmy-dlya-obshheniya-5-prilozhenij-dlya-bezopasnogo-obshheniya-v-seti-na-mobilnyh-ustrojstvah.html" rel="next"><span class="screen-reader-text">Next Post</span><span class="nav-title">Защищенные программы для общения: 5 приложений для безопасного общения в сети на мобильных устройствах</span></a></div></div> </nav></article> </div> </div> <div class="col-md-4 col-lg-4"> <aside id="secondary" class="widget-area"> <section id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><ins class="adsbygoogle" style="display:inline-block;width:100%;height:600px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="6847132033" ></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></section><section id="categories-2" class="widget widget_categories"><h2 class="widget-title">Рубрики</h2> <ul> <li class="cat-item cat-item-6"><a href="https://jumper.su/category/wordpress">Wordpress</a> </li> <li class="cat-item cat-item-1"><a href="https://jumper.su/category/%d0%b1%d0%b5%d0%b7-%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b8">Без рубрики</a> </li> <li class="cat-item cat-item-7"><a href="https://jumper.su/category/verstka">Верстка</a> </li> <li class="cat-item cat-item-5"><a href="https://jumper.su/category/dizajn">Дизайн</a> </li> <li class="cat-item cat-item-4"><a href="https://jumper.su/category/dlya-nachinayushhih">Для начинающих</a> </li> <li class="cat-item cat-item-10"><a href="https://jumper.su/category/obuchenie">Обучение</a> </li> <li class="cat-item cat-item-9"><a href="https://jumper.su/category/primery">Примеры</a> </li> <li class="cat-item cat-item-3"><a href="https://jumper.su/category/raznoe">Разное</a> </li> <li class="cat-item cat-item-8"><a href="https://jumper.su/category/shablon">Шаблон</a> </li> </ul> </section></aside><!-- #secondary --> </div> </div> </main> </div> <section itemtype='https://schema.org/WPFooter' itemscope='itemscope' role='contentinfo' class="fansee-business-footer-wrapper"> <div class="container-fluid px-md-5"> <footer class="fansee-business-footer-wrapper-inner footer-widget"> <div class="footer-widget-wrapper"></div> <div class="footer-widget-wrapper"></div> <div class="footer-widget-wrapper"></div> <div class="footer-widget-wrapper"></div> </footer> </div> <div class="fansee-business-copyright"> <div class="container-fluid"> <div class="fansee-business-copyright-inner"> <div class="fansee-business-copy-right"> <div class="pr-0"> 2022 © Все права защищены. </div> </div> <div class="fansee-business-social-menu"> <ul class="fansee-business-demo-social-menu"> <li><a href="#" target="_blank"></a></li> <li><a href="#" target="_blank"></a></li> <li><a href="#" target="_blank"></a></li> <li><a href="#" target="_blank"></a></li> </ul> </div> </div> </div> </div> </section> <div class="fansee-business-stt scroll-to-top"> <i class="fa fa-arrow-up"></i> </div> <style type="text/css"> .pgntn-page-pagination { text-align: left !important; } .pgntn-page-pagination-block { width: 60% !important; padding: 0 0 0 0; } .pgntn-page-pagination a { color: #1e14ca !important; background-color: #ffffff !important; text-decoration: none !important; border: 1px solid #cccccc !important; } .pgntn-page-pagination a:hover { color: #000 !important; } .pgntn-page-pagination-intro, .pgntn-page-pagination .current { background-color: #efefef !important; color: #000 !important; border: 1px solid #cccccc !important; } .archive #nav-above, .archive #nav-below, .search #nav-above, .search #nav-below, .blog #nav-below, .blog #nav-above, .navigation.paging-navigation, .navigation.pagination, .pagination.paging-pagination, .pagination.pagination, .pagination.loop-pagination, .bicubic-nav-link, #page-nav, .camp-paging, #reposter_nav-pages, .unity-post-pagination, .wordpost_content .nav_post_link,.page-link, .post-nav-links, .page-links,#comments .navigation, #comment-nav-above, #comment-nav-below, #nav-single, .navigation.comment-navigation, comment-pagination { display: none !important; } .single-gallery .pagination.gllrpr_pagination { display: block !important; } </style> <link rel='stylesheet' id='pgntn_stylesheet-css' href='https://jumper.su/wp-content/plugins/pagination/css/nav-style.css?ver=6.0.1' type='text/css' media='all' /> <script type='text/javascript' src='https://jumper.su/wp-includes/js/comment-reply.min.js?ver=6.0.1' id='comment-reply-js'></script> <script type='text/javascript' src='https://jumper.su/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.3.0' id='q2w3_fixed_widget-js'></script> <script type='text/javascript' src='https://jumper.su/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=2.2.0' id='jquery-smooth-scroll-js'></script> <script type='text/javascript' src='https://jumper.su/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1' id='js-cookie-js'></script> <script type='text/javascript' src='https://jumper.su/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script> <script type='text/javascript' id='ez-toc-js-js-extra'> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; /* ]]> */ </script> <script type='text/javascript' src='https://jumper.su/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.17-1617043686' id='ez-toc-js-js'></script> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script type="text/javascript">jQuery(document).ready(function($){$('.mylink').replaceWith(function(){return'<a href="'+$(this).attr('data-url')+'" title="'+$(this).attr('title')+'">'+$(this).html()+'</a>'})});new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> </body> </html><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>