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

Содержание

Примеры использования Font Awesome

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

The following examples are kept simple and assume use of Font Awesome CDN, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see the manual accessibility examples and read more about making your icons more awesome for all users

Пример: Базовые иконки fa-camera-retro

Вы можете разместить иконки Font Awesome в любом месте, используя в имени класса префикс fa и название иконки. Font Awesome разработан так, чтобы он мог быть использован в строковых элементах (мы любим использовать тег  так как он очень короткий, но использование тега  будет семантически более правильно).

<i></i> fa-camera-retro

<i></i> fa-lg
<i></i> fa-2x
<i></i> fa-3x
<i></i> fa-4x
<i></i> fa-5x

Используйте класс fa-fw для того, чтобы задать фиксированную ширину иконкам. Прекрасно подходит для тех случаев, когда различная ширина иконок мешает правильному выравниванию. Особенно полезно при использовании иконок в навигации и списках групп.

<div>
  <a href="#"><i aria-hidden="true"></i>&nbsp; Главная</a>
  <a href="#"><i aria-hidden="true"></i>&nbsp; Библиотека</a>
  <a href="#"><i aria-hidden="true"></i>&nbsp; Приложения</a>
  <a href="#"><i aria-hidden="true"></i>&nbsp; Настройки</a>
</div>

<ul>
  <li><i></i>Иконки списков</li>
  <li><i></i>могут быть использованы</li>
  <li><i></i>как маркеры</li>
  <li><i></i>в списках</li>
</ul>

Используйте классы fa-border и fa-pull-right или fa-pull-left для выделения цитаты или подключения иконки статьи.
 ...Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца... Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.
Пример загрузки (с fa-spinner icon) Пример загрузки (с fa-circle-o-notch icon) Пример загрузки (с fa-refresh icon) Пример загрузки (с fa-cog icon) Пример загрузки (с fa-spinner icon)
Используйте класс fa-spin, чтобы заставить вращаться любую иконку, и используйте класс fa-pulse, чтобы заставить вращаться иконку по 8 шагов. Также работает с классами fa-spinner, fa-refresh, и fa-cog.
 Загрузка. .. Загрузка... Загрузка... Загрузка... Загрузка...

fa-flip-horizontal
fa-flip-vertical
Чтобы произвольно поворачивать и зеркалить иконки, используйте классы fa-rotate-* and fa-flip-*.
 normal fa-rotate-90 fa-rotate-180 fa-rotate-270 fa-flip-horizontal fa-flip-vertical
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban на fa-camera
Чтобы сделать группу из иконок, используйте класс fa-stack для родителя, класс fa-stack-1x используйте для задания стандартного размера иконки, а класс

fa-stack-2x для увеличенного. Класс fa-inverse может быть использован для присваивания альтернативного цвета иконке. Также вы можете использовать классы увеличения для управления размерами иконок.
 fa-twitter на fa-square-o fa-flag на fa-circle fa-terminal на fa-square fa-ban на fa-camera
Примеры для Bootstrap 3
Удалить Настройки
Font Awesome
Версия 4. 7.0
Font Awesome прекрасно работает со всеми компонентами Bootstrap.

<a href="#"> Удалить</a> <a href="#"> Настройки</a> <a href="#"> Font Awesome Версия 4.7.0</a> <div> <a href="#"> </a> <a href="#"> </a> <a href="#"> </a> <a href="#"> </a> </div> <div> <input type="text" placeholder="Ваш Email"> </div> <div> <input type="password" placeholder="Пароль"> </div> <div> <a href="#"> Пользователь</a> <a data-toggle="dropdown" href="#"> </a> <ul> <li><a href="#"> Редактировать</a></li> <li><a href="#"> Удалить</a></li> <li><a href="#"> Забанить</a></li> <li></li> <li><a href="#"> Дать права администратора</a></li> </ul> </div>

Пользовательский CSS
Всё, что вы можете сделать со шрифтами с помощью CSS, вы сможете сделать и с Font Awesome.
Пример рейтинга (позаимствовано из CSS Tricks)
Общедоступность

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

<a href="path/to/settings" aria-label="Настройки"> </a> <a href="path/to/settings" aria-label="Удалить"> </a> <a href="#navigation-main" aria-label="Перейти к основному меню"> </a>
 Обновление. .. Сохранение. Держитесь крепче!

<div> <input type="text" placeholder="Ваш email"> </div> <div> <input type="password" placeholder="Пароль"> </div>
<a href="path/to/shopping/cart" aria-label="Посмотреть 3 предмета в вашей корзине"> </a>
 Уровень заряда: 50%
Как собрать шрифт с иконками — 2
С момента первого поста я доработал схему сборки, расскажу что и зачем там сделано. Сначала будет вступление-рассказ о чем все это, если вы хотите нового, прокрутите до заголовка «Новое в этой версии».
Что вообще происходит
У дизайнера есть несколько разных способов передать иконки разработчику:
отдельными файлами или спрайтом в ПНГ,
отдельными файлами или спрайтом в СВГ,
иконочным шрифтом.
Разработчики фронтенда все чаще привыкли использовать иконки в виде шрифта. Этим же способом распространяются популярные иконочные наборы (например, Font Awesome). У нас в компании разработчики тоже просят «дай шрифт». Мы некоторое время отлаживали схему сборки шрифта: как из файла Скетча автоматически получить файл, пригодный для фронтенда, не замучив дизайнера.
Рассказ может быть полезен разработчикам фронтенда и дизайнерам интерфейсов. В меньшей степени он будет полезен бекендным разработчикам интерфейсов (классический ASP.NET MVC или что-то подобное): схема будет та же, но не будет готовых файлов конфигураций и скриптов. Если кто-то расскажет как прикрутить к этому NuGet, напишите, я добавлю.
Зачем это делать, есть же фонтелло
Есть много готовых сервисов, которые собирают шрифт по загруженным СВГ-файлам, например fontello. Мы не стали использовать ни один из них, потому что с ними могут быть сложности:
Дизайнер может случайно сломать шрифт. Если забыть и не экспортировать иконку, которую уже давал, то следующая версия шрифта будет без него и в неизвестном месте сломается интерфейс. Ситуацию усугубляет факт, что дизайнеров у каждого продукта несколько, а общий набор иконок пополняют 5-6 человек.
Хорошее решение — простое, в нем минимум ручных действий.
Нескольким дизайнерам работать непросто. Если несколько дизайнеров поддерживают один шрифт, то возникает много вопросов синхронизации: где хранить исходники, файлы СВГ и файлы шрифта, кто собирает и кому передает, как не забыть иконку.
Хорошее решение позволяет добавлять иконки скольким угодно дизайнерам так, что они не испортят чужую работу.
Cложно интегрировать в общий процесс сборки продукта. Отдельно стоящий сервис тяжело встроить в общий процесс разработки и сборки, а у кого-то есть еще и процесс CI. Придется вручную собирать сервисом файл, куда-то его загружать и как-то версионировать.
Хорошее решение встраивается в процесс разработки.
Не всех устраивает внешний сервис. Многие компании не верят во внешние сервисы: они могут изменить набор функций, упасть во время подготовки релиза, стать платными или закрыться. В конце концов, их могут хакнуть. Мы — ИБ-компания, и каждый раз раздражать профессионально деформированных безопасников и разработчиков наличием внешнего сервиса не хочется.
Хорошее решение работает внутри компании.
Формируется не всё, что надо. Некоторые сервисы выдают шрифт, а иконки кодируют номерами символов. К сожалению, на эти номера полагаться нельзя. Если убрать иконку или поменять порядок, то в следующий раз сервис может выдать совсем другие коды и все иконки непредсказуемо поменяются.
Если не формировать вместе со шрифтом ЛЕСС-файл, то разработчикам придется в каждом использовании иконки указывать размер кегля, они могут забыть или ошибиться.
Хорошее решение дает разработчикам все что нужно. Иконка кодируется понятным названием, коды символов и размер подставляются автоматически.
Новое в этой версии &nbsp
Раньше я описывал схему сборки шрифта, которая позволяет автоматически собрать шрифтовой файл с иконками из исходника Скетча, сгенерировать для него демо-страницу и ЛЕСС-файл, а также опубликовать пакет в НПМ-репозиторий.
В новой версии мы научились ещё два важных пункта: поставлять иконки в виде скетч-библиотеки и ТТФ-файла. Я пройдусь по каждому изменению, а в конце приложу итоговое решение.
Поставка иконок в виде библиотеки Скетча
Описание работы библиотек
С момента написания того поста вышла новая версия Скетча — 47, в ней появились библиотеки символов. Иконки стало удобно вставлять в макеты именно с помощью библиотеки.
Чтобы сделать один символ на одну иконку и не плодить их для каждого цвета, нужно сделать так:
Сделайте по символу для каждого цвета, в которые у вас можно красить иконки.
Нарисуйте иконку и наложите её маской на символ цвета:
После этого вы сможете менять цвет иконок через оверрайды:
Образец файла: iconset. sketch
К сожалению такой скетч-файл плохо собирался в шрифт. Это происходит из-за маски.
Маска правильно экспортируется в СВГ-файл, но в шрифте нет понятия маски, в итоге иконки ломались. Долгое время я вел скетч-файл в двух вариантах: простые артборды для шрифта и такие же с маской для библиотеки. Но это плохой способ: нужно добавлять и изменять пары одинаковых иконкок. Из-за этого иногда были ошибки — я что-то где-то забывал.
Неожиданно Акронис написал пост на Хабре про свою дизайн-систему. С помощью их поста удалось сделать правильно. Сейчас наш сборщик регулярными выражениями вырезает лишнее из СВГ-файла и превращает файл с маской в обычный файл.
Для вырезания лишнего я подключил grunt-text-replace, вот его конфиг:
replace: { remove_mask: { src: [PATH_BUILD_ICONS + '/*.svg'], overwrite: true, // overwrite matched source files replacements: [ {from : / fill="(.*?)"/m, to : ''}, {from : /(\s*)<\/defs[\s\S]*<\/g>/m, to : ''}, {from : /(\s*)<defs>/m, to : ''}, {from : //m, to : ''}, {from : /xmlns:xlink="(. *?)"/m, to : ''}, {from : /(\s*)<g[\s\S]*?>/m, to : ''}, {from : /(\s*)<\/g>/m, to : ''}, {from : /<svg/m, to : '<svg fill="#000"'}, {from : / transform="(.*?)"/m, to : ''}, {from : / fill-rule="(.*?)"/m, to : ''},] } }
Поставка иконок в виде ТТФ-файла
У нас в компании есть команда технических писателей, которые пишут руководства по продуктам. В руководствах техписатели вставляют иконки, чтобы проиллюстрировать на что нужно нажать в интерфейсе.
Раньше для вставки иконки они делали скриншот экрана, вырезали из него иконку и вставляли в руководство. Сказать, что это неудобный способ — ничего не сказать: растровые скриншоты плохо выглядят при печати; при изменении иконки нужно внимательно заменить все скриншоты с ней; сложно менять цвет иконок в растре, их приходится снимать в каждом цвете — это все увеличивает и без того большую работу.
Редактор документации поддерживает вставку через СВГ, она решила бы почти часть этих проблем, но СВГ легко не перекрасить, и СВГ-картинки плохо выглядит при редактировании.
Идеальным вариантом для них было бы использовать ТТФ-шрифт: он отлично рендерится на экране и при печати, хорошо автоматизируется и удобно перекрашивается.
Однако недостаточно просто включить генерирование ТТФ-файла: по умолчанию коды символов формируются сборщиком автоматически. При следующем формировании шрифта код иконки мог замениться на произвольный. Если технический писатель вставлял иконку в документ, и обновлял шрифт, часть иконок могла непредсказуемо поменяться на другие. Так, конечно, никуда не годилось.
В новой версии вместо автоматического выбора кодов символов я задаю их руками. Меинтейнер шрифтового репозитория (это я) выдает каждой новой иконке новый код и следит за тем, чтобы коды не менялись. Для этого используется секция codepoints в grunt-webfont. Каждой иконке нужно задать номер символа. У нас используется последовательная нумерация начиная с 0xF501.
codepoints : { 'upload-to-cloud_24' : 0xF501, 'upload-to-cloud_64' : 0xF502, }, startCodepoint: 0xF701,
Иконкам, которым номер не выставлен вручную, код выберется автоматически. Вообще это неправильно и лучше следить, чтобы таких иконок не было. Чтобы найти такие иконки их пространство имен отличается, им выдается номер из пространства 0xF701+, поэтому они всегда будут в конце шрифта и их легко найти.
Посмотреть коды символов можно с помощью http://opentype.js.org. Выбираете Glyph Inspector, загружаете шрифт и смотрите:
Наши писатели перешли на ТТФ-файл и довольны.
Я обновил репозиторий решения, там есть пример файла и сборщик. Чтобы понять как и что — прочитайте README.md. Скачивайте и смотрите:
https://github.com/mikeozornin/icon-font-public
Что дальше
Наша схема сейчас покрывает нужны дизайнеров, фронтендеров и технических писателей. Немного не хватает нормального предпросмотра шрифта (пока не хватает времени доделать). Напишу, если будет что показать.
С вопросами, багрепортами или советами — в телеграм @mikeozornin или на почту [email protected].
Icon Fonts против SVG — какой из них использовать?
Коди Арсено
Обновлено 10 марта 2023 г.
Если вы создаете веб-сайт или приложение и задаетесь вопросом, использовать ли шрифты-значки или SVG, вы попали в нужное место. В этой статье мы рассмотрим плюсы и минусы каждого варианта и поможем вам решить, какой из них лучше всего подходит для вашего проекта.
Графические значки являются важным компонентом почти каждого веб-сайта или приложения. Хотя значки обычно имеют небольшой размер по своей природе, выбор формата для веб-значков — нетривиальное решение. Помимо стандартных форматов изображений, у веб-разработчиков есть два основных варианта: SVG или иконочные шрифты. Какой из них вы должны использовать? Давайте посмотрим, как эти два формата сравниваются с точки зрения производительности, гибкости и доступности.
Эволюция веб-иконок
Веб-иконки прошли долгий путь с первых дней существования Интернета. До появления CSS веб-иконки должны были быть изображениями. Поскольку файлы изображений имеют большой размер, веб-разработчики всегда пытались найти альтернативные методы отображения маленьких значков.
В начале 2000-х значки часто представляли собой простую пиксельную графику, которая использовалась в основном для навигации и обозначения ссылок. По мере развития веб-дизайна менялось использование и дизайн иконок.
Одним из первых крупных изменений в эволюции веб-иконок стало введение шрифтов для иконок. Иконочные шрифты были впервые представлены в 2010 году и быстро завоевали популярность как способ легко встраивать значки в веб-дизайн. Они предложили легкую и масштабируемую альтернативу использованию изображений для значков.
Поскольку веб-дизайн продолжал развиваться, использование SVG (масштабируемой векторной графики) стало более распространенным. SVG обеспечивают большую гибкость дизайна и могут быть легко масштабированы без потери качества. Это сделало их популярным выбором для создания пользовательских значков и графики.
Внедрение плоского дизайна в середине 2010-х годов также оказало значительное влияние на эволюцию веб-иконок. Плоский дизайн подчеркивал простоту и минимализм с упором на использование простых форм и смелых цветов. Это привело к широкому использованию простых, минималистичных иконок, которые были легко узнаваемы и визуально привлекательны.
В последнее время тенденция к использованию анимированных иконок стала более распространенной. Анимированные значки могут добавить элемент интерактивности и вовлеченности в веб-дизайн, что делает их популярным выбором для веб-сайтов и приложений. Еще одно недавнее развитие веб-иконок — использование 3D-графики и изометрического дизайна. Эти стили добавляют глубину и размер значкам, делая их визуально более интересными и привлекательными.
Что такое иконочные шрифты?
Иконочные шрифты — это текстовые файлы, которые можно изменять с помощью CSS. Следовательно, они масштабируются намного лучше, чем растровые изображения, поэтому изменение размера иконочного шрифта не ухудшает его визуальное качество. Изменить цвет или добавить тень так же просто, как и отредактировать текст. Вы можете легко найти бесплатные иконочные шрифты для использования на своем веб-сайте или создать свой собственный. Одним из недостатков использования иконочных шрифтов является то, что большинство наборов шрифтов содержат значки, которые вы, вероятно, не будете использовать, поэтому их будет всего 9.0027 занимает место .
Как и CSS-спрайты до них, иконочные шрифты начинают терять популярность у разработчиков. Для правильного отображения шрифтов значков часто требуется, чтобы браузер делал дополнительные запросы к серверу, что может привести к FOIT или миганию невидимого текста на значках, пока библиотеки шрифтов все еще загружаются. Если браузер не может интерпретировать шрифты, пользователь просто увидит пустые символы. Поскольку такие сценарии неприемлемы для профессиональных веб-сайтов, все больше разработчиков обращаются к SVG.
Что такое SVG?
SVG (масштабируемая векторная графика) позволяют отображать векторную графику в браузере. SVG быстро становятся новым стандартом для веб-иконок и анимации. Они не только обеспечивают превосходное масштабирование, но и часто рендерятся быстрее и надежнее, чем иконочные шрифты. Поскольку векторная графика полностью состоит из кода, ее не нужно импортировать из больших внешних файлов. Кроме того, они намного меньше по размеру, чем типичные файлы JPG или PNG, а также большинство библиотек иконочных шрифтов.
Чтобы максимально эффективно использовать SVG, может потребоваться некоторое обучение, но вознаграждение того стоит.
Как работают SVG
Можно использовать SVG как в обычном элементе в вашем HTML, используя атрибуты ширины и высоты для настройки размеров. Однако этот метод несколько ограничивает ваши возможности по настройке SVG.
Если вам нужна возможность дальнейшей настройки значков SVG непосредственно из HTML, вам необходимо встроить SVG, просто вставив код прямо в HTML-документ. Затем вы можете изменить цвет или применить фильтры, настроив его с помощью CSS. Вот как выглядит пример иконки SVG:

Приведенный выше код, вдохновленный Mozilla, отображает в браузере примерно такую графику:
Хотя на первый взгляд код SVG может показаться пугающим, разработка значков SVG и управление ими обманчиво просты. Фактически, вы можете просто использовать такую программу, как Adobe Illustrator, для создания собственной векторной графики для использования в качестве значков. Просто сохраните их как файлы SVG или сгенерируйте код в интерфейсе Illustrator. Вы также можете экспортировать рисунки из Документов Google в виде файлов SVG.
Иконочные шрифты все еще полезны?
Иконочные шрифты далеко не устарели. Хотя иконочные шрифты не всегда являются наиболее эффективными и надежными, они по-прежнему относительно просты и легки в реализации, поэтому многие разработчики продолжают их использовать. В зависимости от количества используемых значков может не стоить переключать шрифты значков для SVG в ваших старых проектах; тем не менее, SVG — это окончательный способ будущего, так что вы можете спокойно использовать их в будущем.
Сравнение SVG и шрифтов значков
Чтобы помочь вам решить, какой формат значков выбрать, давайте посмотрим, как эти два варианта сравниваются в разных отделах.
Преимущества иконочных шрифтов
Иконочные шрифты существуют уже некоторое время и являются популярным выбором для отображения значков на веб-сайтах и в приложениях. Вот некоторые из их преимуществ:
Простота использования : Иконочные шрифты просты в использовании и требуют минимальной настройки. Все, что вам нужно сделать, это включить файлы шрифтов в ваш проект и использовать CSS для отображения значков. Вы даже можете настроить значки с помощью CSS, например, изменить цвет, размер и другие свойства.
Облегченный : Иконочные шрифты легкие и не сильно увеличивают время загрузки страницы вашего веб-сайта. Поскольку значки кодируются как глифы шрифта, они по сути являются текстом и не требуют загрузки отдельных файлов изображений.
Широко поддерживается : Иконочные шрифты широко поддерживаются браузерами и могут использоваться практически на любом устройстве или платформе. Они также совместимы со средствами чтения с экрана и другими вспомогательными технологиями, что делает их доступными для пользователей с ограниченными возможностями.
Недостатки шрифтов-иконок
Однако использование шрифтов-иконок имеет некоторые недостатки:
Ограниченная настройка : Хотя шрифты-иконки можно настраивать с помощью CSS, они ограничены с точки зрения гибкости дизайна. Вы ограничены предопределенным набором значков, включенных в шрифт, и не можете создавать свои собственные значки.
Проблемы с качеством : Некоторые шрифты со значками могут иметь проблемы с качеством, такие как неровные края или пикселизация, особенно при меньших размерах. Это может быть особенно заметно на экранах с высоким разрешением.
Проблемы доступности : Несмотря на то, что иконочные шрифты обычно доступны, их использование вызывает некоторые опасения. Поскольку они закодированы как глифы шрифта, программы чтения с экрана могут испытывать трудности с идентификацией их как изображений, а пользователи могут не иметь доступа к альтернативным текстовым описаниям.
Преимущества SVG
SVG становятся все более популярными в последние годы и в настоящее время широко используются для отображения значков на веб-сайтах и в приложениях. Вот некоторые из их преимуществ:
Гибкость дизайна : SVG обеспечивают большую гибкость дизайна, чем иконочные шрифты, позволяя создавать собственные значки и графику. Вы также можете применять расширенные эффекты и анимацию к SVG с помощью CSS или JavaScript.
Масштабируемость : SVG масштабируемы и могут быть изменены без потери качества. Это делает их идеальными для использования на экранах с высоким разрешением или в адаптивном дизайне, где размер значков необходимо изменять в зависимости от устройства или размера экрана.
Специальные возможности : SVG более доступны, чем иконочные шрифты, поскольку их легко распознать программами чтения с экрана и другими вспомогательными технологиями. Вы также можете предоставить альтернативные текстовые описания для SVG, сделав их доступными для пользователей с ограниченными возможностями.
Недостатки SVG
Однако у использования SVG есть и некоторые недостатки:
Сложная настройка собственные пользовательские значки. Возможно, вам потребуется использовать специализированное программное обеспечение или инструменты для создания и оптимизации ваших SVG.
Большие размеры файлов : SVG могут иметь большие размеры файлов, чем иконочные шрифты, особенно если они содержат сложную графику или анимацию. Это может повлиять на время загрузки страницы и производительность вашего сайта.
Поддержка браузера : Хотя SVG поддерживаются большинством современных браузеров, некоторые старые браузеры могут не поддерживать их полностью. Это может привести к непоследовательному рендерингу или проблемам с отображением для некоторых пользователей.
Какой выбрать?
Итак, какой вариант выбрать? В конечном итоге это зависит от конкретных требований и ограничений вашего проекта. Вот несколько ключевых факторов, которые следует учитывать при выборе шрифта значков и SVG:
1. Размер
Если вы решите встроить свои SVG для добавления стилей, они могут быстро увеличиться в размере, а код может стать довольно громоздким. Также стоит отметить, что встроенный код SVG не кэшируется браузером пользователя. С другой стороны, внешние файлы SVG можно кэшировать. Если у вас много значков на одной странице, шрифты значков могут обеспечить более плавный пользовательский интерфейс, чем встроенные SVG. Конечно, если вы используете готовый набор шрифтов для значков, вы, вероятно, будете тратить ресурсы на неиспользуемые значки.
Здесь стоит отметить, что 10 оптимизированных SVG-иконок, скорее всего, будут намного меньше, чем вся библиотека иконок. Однако, если вы создадите свою собственную библиотеку значков, содержащую только те значки, которые вам нужны, шрифт библиотеки значков в конечном итоге станет меньше.
2. Производительность
Иконочные шрифты могут кэшироваться, что ускоряет их загрузку непосредственно из браузера. Однако недостатком этого является то, что они создают дополнительный HTTP-запрос. С другой стороны, если вы встраиваете значки SVG, дополнительные HTTP-запросы не требуются, однако они не могут кэшироваться браузером.
Однако вы можете включить файлы SVG во внешний файл, что сделает их кэшируемыми браузером. Опять же, с точки зрения производительности разница в скорости будет зависеть от того, насколько велик ваш шрифт значков/SVG. Попробуйте запустить тесты производительности с обоими, чтобы определить, какой из них загружается быстрее.
3. Гибкость
Оба формата могут быть оформлены с помощью CSS, но встроенные SVG предоставляют гораздо больше возможностей, таких как обводка глифов и разноцветные значки. Вы даже можете иметь анимированные веб-иконки.
4. Поддержка браузеров
Какой бы формат значков вы ни выбрали, вам может потребоваться выполнить некоторые дополнительные действия, чтобы сделать их совместимыми со старыми браузерами. Поскольку они существуют дольше, иконочные шрифты поддерживаются более широко. Любой, кто использует IE 6 или выше, что, вероятно, включает всех, должен иметь возможность видеть ваши шрифты значков. Если вы используете SVG, вы можете включить полифил JS для поддержки тех, кто использует IE 8 или более раннюю версию.
Однако, поскольку большинство пользователей отказались от устаревших версий браузеров, это не должно вызывать особого беспокойства, независимо от того, выбираете ли вы иконочные шрифты или SVG. Единственное отсутствие поддержки с точки зрения значков SVG и современных браузеров связано с IE, который неправильно масштабирует файлы SVG (рекомендуются атрибуты высоты и ширины).
5. Масштабируемость
Хотя и SVG, и шрифты значков основаны на векторах, браузеры интерпретируют шрифты значков как текст, что означает, что они подлежат сглаживанию. Поэтому SVG, как правило, выглядят немного четче, чем иконочные шрифты.
6. Позиционирование
Поскольку шрифты значков должны быть вставлены через псевдоэлемент, позиционирование значков шрифтов может оказаться сложной задачей. Возможно, вам придется учитывать высоту строки , вертикальное выравнивание и интервал между буквами среди других факторов, чтобы псевдоэлемент и фактический глиф идеально совпадали. Для SVG вам просто нужно установить размер.
7. Доступность
Если доступность является главным приоритетом для вашего проекта, SVG может быть лучшим выбором. В отличие от иконочных шрифтов, SVG имеют встроенные семантически значимые элементы, поэтому вам не нужно включать какие-либо обходные пути, чтобы сделать ваши шрифты доступными для программ чтения с экрана.
Инструменты и ресурсы для значков SVG
Сеть разработчиков Mozilla предлагает очень подробное руководство по SVG, в котором объясняется, как стилизовать значки с помощью встроенного CSS. В дополнение к Adobe Illustrator существует несколько инструментов, которые помогут вам реализовать значки SVG. IcoMoon — отличный ресурс для готовых SVG и значков шрифтов, а приложение IcoMoon позволяет создавать собственные. Если вы ищете что-то с открытым исходным кодом, Inkscape — это бесплатная программа для векторного рисования, которая экспортирует файлы SVG. Такие инструменты, как Convertio, позволяют преобразовывать другие форматы изображений в файлы SVG.
Важно отметить, что такие программы, как Illustrator и Inkscape, часто встраивают в экспортируемые файлы SVG дополнительную информацию, которая вам не нужна . Таким образом, вы должны обработать свои значки SVG с помощью инструмента оптимизации, такого как SVGO или SVG Minifier, чтобы обрезать их, прежде чем добавлять на свой веб-сайт.
Помимо ресурсов, упомянутых выше, существует также множество веб-сайтов с иконками, которые предоставляют высококачественные векторы как платные, так и бесплатные услуги. Ознакомьтесь с нашим полным руководством по ресурсам библиотеки значков, а также с нашим постом о повышении скорости ваших глификонов с помощью CDN глификонов.
Резюме
В сообществе все еще ведутся споры о том, лучше ли иконочные шрифты, чем SVG, или наоборот. Правда в том, что то, что делает тот или иной «лучше», в некоторых случаях зависит от обстоятельств, в которых он используется.
Однако чаще всего SVG являются предпочтительным методом . Они гораздо более масштабируемы, предлагают лучший пользовательский интерфейс и поддерживаются всеми основными браузерами. Даже несколько ведущих экспертов по веб-производительности говорят, что отказ от иконочных шрифтов в пользу SVG необходим.