fr_end
@fr_end
Frontend разработчик

Почему не собрались svg иконки в шрифт?

Использую webpack и fontgen-loader, в итоге сборки выходит css со стилями типа
.ai-chat_a:before {
	content: "\F103";
}

и даже генерируется шрифт, но в итоге вместо иконки вижу то просто черную рамочку(как будто проблема в кодировке), то вообще ничего, просто пустой блок. Даже не знаю, на что думать
Какими сборщиками вы пользуетесь на webpack, может стоит попробовать другой?
  • Вопрос задан
  • 327 просмотров
Пригласить эксперта
Ответы на вопрос 2
@YNile
JS Developer
Сам файл шрифта подключил?
Ответ написан
copist
@copist
Empower people to give
Символы для генерации шрифта должны быть максимально упрощены силами Adobe Illustrator или Inkscape.
  • Должен быть только один путь или другой примитив, без пересечений
  • Один цвет, любой
  • Без градиентов, клипов, анимации, текста, скриптов

В твоём случае - скорее всего элемент чёрного цвета находится поверх квадратика белого цвета или прозрачного квадратика. Открой файл, удали этот квадратик.

Спонсором ответа является сервис Icons8
30 000+ иконок в 6 стилях, бесплатно, в любом цвете и размере + редактор + генератор шрифтов

Я помогу разобраться. Приложи, пожалуйста, в вопросу или в комментариях несколько проблемных иконок и ZIP с результатом генерации (CSS, файлы TTF/OET/SVG/WOFF/WOFF2) и страницу HTML с подключенными файлами стилей c фрагментом, где используются эти символы.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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