Как исправить перевернутые иконки при извлечении SVG из Font Awesome

Быстрый ответ

Чтобы извлечь SVG из Font Awesome, вставьте необходимый SVG-код прямо в ваш HTML-файл. Это особенно удобно, когда вам нужно использовать всего пару иконок из этой библиотеки, и вы предпочитаете экономить время. Пример:

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="camera-retro" class="svg-inline--fa fa-camera-retro fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path fill="currentColor" d="..."></path>
</svg>

Замените "..." в элементе <path> на конкретные данные пути SVG, которые можно обнаружить на странице нужной иконки Font Awesome. Можно менять атрибут fill, чтобы подстроить цвет иконки под ваш проект. SVG, представленный таким образом, готов к дальнейшему использованию: его можно масштабировать и оформлять при помощи CSS.

Поиск иконок в репозитории Font Awesome

Если вы считаете подробности важными, следующие действия помогут углубиться в процесс:

1. В репозитории FortAwesome/Font-Awesome откройте папку svgs, где собраны SVG-иконки, готовые к встраиванию в HTML.
2. Выберите подходящую вам иконку и скачайте её SVG-файл.
3. Вставьте этот файл прямо в HTML-код вашей страницы — это всё, что требуется для начала использования.

Учтите, что SVG-иконки, извлечённые из шрифтов, обладают особенностями координатных систем с осью Y, направленной вверх. Используя атрибуты transform, например, scale и translate, вы можете легко адаптировать их под свои потребности:

<svg height="179.2" width="179.2" transform="scale(1,-1) translate(0,-179.2)">
  <path d="..."></path>
  <!-- Да, ось Y ориентирована иначе, но мы это обходим. Запомните: SVG из шрифтов часто идут вверх ногами, и нам приходится это корректировать.-->
</svg>

Если вам нужно работать со сложным набором иконок, воспользуйтесь IcoMoon App — он позволит легко извлекать SVG и правильно масштабировать их. Для полного контроля обратите внимание на fontforge, где можно использовать скрипты для корректной настройки ориентации и путей вашего SVG.

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

Гарантированная совместимость

Выдержка испытаний

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

Подробнее об этом расскажет наш спикер на видео

Совместимость с браузерами

Опытные разработчики знают, что поддержка SVG варьируется в разных браузерах:

• CSS-правила могут работать по-разному или даже не функционировать в некоторых браузерах.
• Учитывайте различия в поведении SVG и настраивайте их с учётом специфики каждого браузера.
• Не пренебрегайте атрибутами доступности, такими как aria-hidden.

Оптимизация производительности

Встраивание SVG в HTML должно повышать производительность, а не ухудшать её:

• Минификация: сокращайте размеры SVG-файлов без потери качества.
• Ленивая загрузка: позволяйте иконкам, не требующим быстрого отображения, загружаться после основного контента.
• HTTP/2: используйте преимущества HTTP/2 для ускорения загрузки.

Визуализация

Представим, что извлечение SVG из Font Awesome — это разминирование бомбы:

Бомба (💣): [Провод 1, Провод 2, Провод 3, ..., Провод n]

Для разминирования через HTML используйте такой подход:

1. Кусачки (✂️): тег `<i class="fa fa-icon-name"></i>`
2. Перерезание (💥): извлекаем SVG с помощью JavaScript или другого инструмента
3. Результат (💡): получившийся код SVG

Итак, результат:

💣 ➡️ ⚙️ = Разминированные SVG [💡 Провод 1, 💡 Провод 2, ..., 💡 Провод n]

Поздравляем, ваши SVG-драгоценности готовы к использованию! 😎 🎉

Углубленное понимание и управление жизненным циклом

Адаптивность и масштабирование

SVG идеально подходят для адаптивных веб-приложений:

• Они идеально масштабируются и изменяют размер без потери качества при помощи CSS.
• Медиа-запросы помогают SVG адаптироваться под разные экраны и устройства.
• Благодаря взаимодействию с ViewBox, SVG сохраняют пропорции при различных разрешениях.

Быть в тренде

Репозиторий Font Awesome регулярно обновляется и развивается:

• Следите за репозиторием Font Awesome и обновлениями в нём.
• Подписывайтесь на новостную рассылку Font Awesome, чтобы всегда быть в курсе новых иконок.
• Избегайте использования устаревших элементов. Ведь иконки тоже могут выходить из моды.

Творческие возможности

Модифицируйте ваши SVG в своём усмотрении:

• Редактируйте пути чтобы добавить уникальности в дизайн вашего сайта.
• Оживите SVG-иконки с помощью анимаций в CSS или SMIL.
• Добавьте интерактивности с помощью немного JavaScript.

Полезные материалы

1. Font Awesome — начальная точка знакомства с миром Font Awesome.
2. HTML Standard — нормативный документ, описывающий взаимодействие SVG с HTML.
3. Подбор иконок идеального вида | Font Awesome — витрина с последними новинками в мире иконок.
4. Конвертер Font Awesome в PNG — быстро превратите иконки Font Awesome в PNG с помощью этого инструмента.
5. Вопросы по 'font-awesome+svg' на Stack Overflow — площадка для обсуждения вопросов, связанных с Font Awesome и SVG.
6. Система иконок на основе SVG-спрайтов | CSS-Tricks — подробности использования системы иконок на основе SVG-спрайтов.
7. Начните с более чем 1000 бесплатных иконок | Font Awesome — руководство для начинающих пользователей Font Awesome.