@arttstyle
web-макака

Как вытащить отдельные иконки font awesome?

есть проблема
font awesome подключается через костыли(JS)
нагрузка на их сеть видимо столь высока что иногда сайт (font awesome) просто не загружается и соответственно все скрипты тоже... как следствие лагает и мой сайт
у меня на сайте всего 5-10 иконок, может можно их как-нибудь выдернуть отдельно и не подключать эту шляпу целиком?
  • Вопрос задан
  • 125 просмотров
Решения вопроса 1
sniggering_deus
@sniggering_deus
Mother is a god in the eyes of a child.
Как вариант можно делать вот так:

Скачиваем SVG иконки Font-Awesome. Берём только те которые используется в проекте, затем каждую иконку кодируем для вставки через CSS.

Получаем полный код SVG нужной иконки:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54-61.81 0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98 96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16z"/></svg>


Через encoder получаем код для вставки через CSS:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54-61.81 0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98 96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16z'/%3E%3C/svg%3E");


Создаём класс который будет использоваться для нужной иконки. Добавляем нужные свойства, размер иконки, высота, свойства для бэкграунда, и саму иконку в качестве бэкграунда элемента. Это выглядит вот так:

.my-icon-cat {
width: 20px;
height: 20px;
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54-61.81 0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98 96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16z'/%3E%3C/svg%3E");
}


Затем в нужное место вставляем например пустой span с классом иконки:

<span class="my-icon-cat"></span>

Демо:



В итоге не нужно тянуть целую библиотеку. Никаких лишних запросов. Все используемые иконки можно вынести в отдельный файл CSS. Единственное что может немного вызвать напряжение, то что при огромном количестве иконок, размер файла может сильно увеличиться, но и это наверное не проблема. Лучше чем куча лишних запросов. ИМХО.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
space2pacman
@space2pacman Куратор тега CSS
Просто царь.
fontello.com - сервис где можно с разных сервисов собрать нужные себе иконки.
Ответ написан
@strelok011
Докину в копилку - https://icomoon.io/
Для любителей пойдет - можно как закинуть в приложение свои векторные изображения и получить на выходе шрифты и/или svg спрайты, так и навыбирать из готовых бесплатных комплектов.
Посоветую еще определиться с тем, КАК вы собираетесь это использовать.
Чем хороши шрифты - монохромные иконки красятся собственно как текст, через css color
SVG изображения в виде фона в стилях, либо спрайты - это уже проблема. Как вариант - вставка инлайном в html, тогда доступна возможность стилизовать через css (но тут возможны проблемы, нужно понимать, что вы внутри svg красите, особенно если контур из нескольких частей).
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы