@Breeze1

Как сделать шрифт для svg?

На сайте будет много svg иконок, хочу сделать из них шрифт, и внедрять на сайт. Использую iconmoon сервис для этой цели, собственно проблема в том, что все иконки разных размеров, где-то 15px, где-то 35px. Iconmoon делает все иконки одинаковые по ширине, можно как-то сделать чтобы иконки были оригинальных размеров ? либо посоветуйте какой-нибудь другой способ как это можно реализовать ?
  • Вопрос задан
  • 89 просмотров
Пригласить эксперта
Ответы на вопрос 1
LenovoId
@LenovoId
what the fuck ?
Для начала надо понять что такое SVG спрайт
Это обычный svg документ .. со списком иконок и со стилем : display:none; который вставлен в любое место в html документе и имеет список нужных иконок или же верно сказать path и всё далее как сказал SmthTo в html документе мы делаем мягкую ссылку и вставляем куда требуется.

Что бы иконка везде отображалась одинаково и была одинаковых размером то как правило их рисуют
большого размера 1000px x 1000px и центре находится экспозиция т.е сама иконка

После всех манипуляций берём полностью <path id="" d="" /> и сохраняем столбиком в html например в самом верху страницы что обычно и делают сборщики и примерно так это выглядит :

<svg width="" height="" viewbox="" style="display:none;">
 <symbol id="ico1" viewbox="0 0 1000 1000">  <path  d="M..............z" /></symbol>
 <symbol id="ico2" viewbox="0 0 1000 1000">  <path  d="M..............z" /></symbol>
 <symbol id="ico3" viewbox="0 0 1000 1000">  <path  d="M..............z" /></symbol>
 <symbol id="ico4" viewbox="0 0 1000 1000">  <path  d="M..............z" /></symbol>
</svg>


В html мы ссылкаем на любой path точно как сказано выше т.е таким образом :
<svg>
	<use xlink:href='#ico1' />
</svg>


Если без кучи слов то вот так :

Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
22 марта 2019, в 09:52
20000 руб./за проект
22 марта 2019, в 06:30
10000 руб./за проект
22 марта 2019, в 03:12
20000 руб./за проект