Font awesome svg: SVG Sprites | Font Awesome Docs

спрайтов SVG | Font Awesome Docs

Хотите использовать значки Font Awesome в качестве спрайтов SVG? Они у нас есть. И нет необходимости загружать код JavaScript во время выполнения.

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

Прежде чем приступить к работе

Убедитесь, что у вас есть:

• Найдите файлы спрайтов SVG в Font Awesome 6 Download.
• Подтверждено, что известные проблемы не доставят вам проблем.

Выберите файлы спрайтов

Внутри Font Awesome Загрузите или установите пакет, в котором вы найдете нужные файлы. В Font Awesome Pro есть три семейства иконок: Classic, Sharp и Brands. Существует пять стилей классических значков, и скоро появятся новые стили Sharp. Бесплатная версия включает набор значков сплошного и обычного цветов, а также все значки брендов.

Классическое семейство

Sharp Family

Стиль	Доступность	Файл спрайта	Похоже на
Solid	Только Pro	sharp-solid.svg
Обычный	Только Pro	Sharp-regular. svg
Светлый 9 0040	Только Pro	sharp-light.svg
Тонкий	Вскоре!
Duotone	Скоро!

Семейство брендов

Добавить значки

Чтобы добавить значки из файла спрайтов, выполните следующие действия. :

1. Возьмите файл спрайта для стиля или стилей, которые вы хотите использовать.
2. Поместите этот файл вместе с остальными вашими статическими файлами, такими как CSS или изображения, в ваш проект.
3. В теле вашего документа вызовите отдельный значок по имени в файле спрайта для стиля, который вы хотите использовать. Убедитесь, что путь правильно указывает на место, куда вы поместили файлы спрайтов, и что они размещены на том же сервере!

Вот несколько примеров того, как вы можете называть значки в различных стилях:

Проблемы со спрайтами SVG

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

Политика того же источника

Если вы используете URL-адреса в xlink:href , они должны быть загружены из того же домена. На SVG, загруженных таким образом, существует защита от разных источников. Некоторые люди просто обслуживают его прямо из своих статических ресурсов. Вы также можете использовать прокси.

Internet Explorer не загружает удаленные файлы SVG

Если вы используете URL-адрес в формате xlink:href , IE не будет автоматически загружать файл для вас. Проверьте этот проект (открывается в новом окне), если это то, что вам нужно.

Веб-шрифты и SVG | Font Awesome Docs

Веб-шрифты использовались с самых первых дней существования Font Awesome и до сих пор являются надежной рабочей лошадкой. SVG — это новичок в этом блоке с множеством дополнительных приемов и возможностей. Какой из них подходит именно вам?

Веб-шрифты + CSS

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

Сверхспособности:

• Самый простой в настройке и использовании
• Надежная и проверенная технология
• Может использоваться в псевдоэлементах CSS для отображения значка, не касаясь HTML
• На каждый значок можно ссылаться по его уникальному юникод value
• Разделено на подмножества для повышения производительности

Слабые стороны:

• Невозможно выполнять некоторые сложные трюки со стилем
• Невозможно выполнять автоматическую доступность (кроме комплекта)

SVG + JS

SVG — это векторные изображения, отображаемые с помощью механизма браузера. Мы объединяем его с javascript, чтобы использовать магию значков Font Awesome в ваших приложениях, сайтах и ​​других веб-проектах.

Суперспособности:

• Отлично подходит для приложений на основе javascript при рендеринге с помощью наших пакетов JS
• Способен на некоторые причудливые трюки, такие как маскирование, наслоение и силовые преобразования
• Использует мощь векторов для рисования четких значков любого размера
• Проще создавать пользовательские подмножества с только значками, которые вам нужны

Слабые места:

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

Наглядное сравнение

Функция/опция	Веб-шрифты и CSS	SVG и JS
Как отображаются значки	Как псевдоэлементы CSS. Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт