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

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

Главная / HTML и CSS

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

Что такое иконки в формате шрифта

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

Иконки в формате шрифта имеют следующие преимущества перед иконками в виде растровых изображений:

• Возможность применять к ним любые CSS стили, которые можно применять к обычному тексту;
• Хорошо масштабируются, т.к. иконки в формате шрифта являются векторными изображениями. Т.е. Вы можете увеличивать или уменьшать их размеры без потери качества;
• Меньшее количество HTTP-запросов, которое может потребоваться для их загрузки по сравнению с количеством HTTP-запросов, которых может потребоваться для загрузки иконок в виде растровых изображений;
• Более быстрая загрузка иконок, т. к. они имеют небольшой размер;
• Наборы иконок в формате шрифта поддерживаются всеми браузерами, из-за того что они поставляются в различных форматах: eot, ttf, woff, svg и др. Т.е. если браузер не имеет поддержку одного формата, то он использует другой;
• Большинство наборов иконок (Font Awesome, Glyphicons и др.) содержат в своём наборе иконки SVG (в формате шрифта), которые являются очень чёткими и отлично масштабируются.

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

Но иконки в формате шрифта кроме преимуществ, имеют ещё и следующие недостатки:

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

Использование иконок в формате шрифта

Иконки в формате шрифта невероятно просты в использовании.

Рассмотрим основные действия для работы с пакетами иконок в формате шрифта:

1. Скачать с сайта пакет иконок в формате шрифта, который вы хотите использовать на своём сайте. Рассмотрим наши действия на примере Font Awesome.

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

   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

3. Скопировать каталог «fonts», содержащий шрифты, в Вашу директорию на сайте. Если уже есть такая директория, то Вы можете просто скопировать содержимое каталога «fonts» в эту директорию.
4. В зависимости от пакета иконок, который Вы используете, значки обычно вставляются одним из двух способов:

• с помощью указания соответствующих классов в атрибуте class элемента i или span.

  <!-- Отображение иконки в Font Awesome -->
  <span></span>
  <i></i>

• с помощью указания номера значка в атрибуте data:

  <!--Шрифт Elegant Icon Font -->
  <!--Отображение иконки с помощью указания номера значка в атрибуте data -->
  <span data-icon="&#x3f;"></span>

<!-- Например, увеличить размер иконки в 4 раза с помощью класса Font Awesome fa-4x -->
<i></i>
<!-- Например, с помощью указания собственных правил CSS -->
<!-- Установим размер иконки и её цвет -->
<i></i>

.large-green {
  font-size: 50px;
  color: green;
}
HTML:
<i></i>

Примеры использования иконок в формате шрифта

Рассмотрим некоторые примеры, где можно использовать иконки в формате шрифта.

• Иконки можно использовать в кнопках:

  <button><i></i> Кнопка1</button>
  <button><i></i> Кнопка2</button>
  <button><i></i> Кнопка3</button>
  <button><i></i> Кнопка4</button>

• Иконки можно использовать в меню:

• Иконки можно использовать в различных информационных виджетах:

• Иконки можно использовать для создания социальных кнопок:

• Иконки можно использовать в кнопках, с помощью которых осуществляется работа с записями в таблице:

Популярные пакеты иконок в формате шрифта

Рассмотрим наиболее популярные пакеты иконок в формате шрифта.

Glyphicons

Font Awesome

Foundation Icon Fonts

Brandico

Elegant Icon Font

Themify Icons

Ionicons

Octicons

Open Iconic

Typicons

Stroke 7

Ligature symbols

Различные коллекции иконок

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

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

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

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

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

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

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

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

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

Анимация

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

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

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

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

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

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

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

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

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

CSS оформление

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

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

У иконочного шрифта хорошая поддержка браузерами.

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

Но с другой стороны, для загрузки всех иконок нужен только один HTTP

<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 иконок в

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

• Создано 21.02.2020 10:01:09
• Михаил Русаков

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

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

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

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

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

значков шрифтов — темы Sass

Начиная с выпуска R1 2017, пользовательский интерфейс Kendo предоставляет интегрированные значки шрифтов, предназначенные для веб-приложений и виджетов визуализации данных пакета.

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

Посетите раздел «Основное использование», чтобы узнать, как отображать значок.

Вы можете искать значки, используя панель поиска браузера по умолчанию (CTRL + F).

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

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

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

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

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

1. Загрузите тему пользовательского интерфейса Kendo в свой проект.

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

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

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

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

• Применение разных размеров.
• Применение цветов значков.
• Перелистывание иконок.

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

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

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

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

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

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

 
<промежуток> 
<стиль>
    .цветной значок {
        цвет: зеленый;
    }

 

Применение отражения

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

 
<промежуток> 
<промежуток> 
<промежуток> 
 

Иконочные шрифты против SVG — какой из них следует использовать?

Коди Арсено

Обновлено 10 марта 2023 г.

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

Графические значки являются важным компонентом почти каждого веб-сайта или приложения. Хотя значки обычно имеют небольшой размер по своей природе, выбор формата для веб-значков — нетривиальное решение. Помимо стандартных форматов изображений, у веб-разработчиков есть два основных варианта: SVG или иконочные шрифты. Какой из них вы должны использовать? Давайте посмотрим, как эти два формата сравниваются с точки зрения производительности, гибкости и доступности.

Эволюция веб-иконок

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

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

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

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

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

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

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

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

Как и 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 и шрифтов значков

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

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

Иконочные шрифты существуют уже некоторое время и являются популярным выбором для отображения значков на веб-сайтах и ​​в приложениях. Вот некоторые из их преимуществ:

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

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

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

Недостатки шрифтов-иконок

Однако использование шрифтов-иконок имеет некоторые недостатки:

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

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

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

Преимущества SVG

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

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

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

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

Недостатки SVG

Однако у использования SVG есть и некоторые недостатки:

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

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

3. Поддержка браузера : Хотя 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, чтобы обрезать их, прежде чем добавлять на свой веб-сайт.