Нужен урок по созданию векторных спрайтов иконок!?

Question

[Super Star]

Есть у меня вот такая секция(скрин ниже). Данные иконки повторяются в других частях макета, но в более меньшем размере, а тут еще и как видите иконка цветная. Хочется чтобы можно было задать любой размер + цвет, а не делать спрайт с такими же иконками только другого цвета и потом менять позицию картинки при наведении курсора.

Answer 1

[Максим]

1) https://youtu.be/YDKskOH5sSw
2) https://youtu.be/Dtm2HeqqZiU

Comments

[Super Star]

там используется псевдокласс before & after. т.е. иконка добавиться или до блока или после блока, а как мне её добавить именно в блок? ну вот как на картинке?

[Максим]

код покажите свой ! я же не знаю как у вас и что устроено !

[Super Star]

. Shadow: но я еще спрайт не успел сделать =)

[Максим]

Андрей Рысь: ну если сказать по человечески ! то иконки как и любые другие служебные изображения можно рисовать на обычном листке бумаги - потом через сканер в фотошоп - доделать и в corel или в inkscape и там уже ваять что угодно ! главное что сам каркас изображения будет готов и его останется только перенести в svg и всё а контуры и прочее менять при fill:hover; либо stroke и собственно просто практика нужна

Answer 2

[Camaro67]

ИМХО лучше сделать иконочный шрифт, например, с помощью сервиса icomoon

Comments

[Super Star]

Класс. Вопрос а как их добавить внутрь вот такого блока https://jsfiddle.net/okts1rLt/ Если я буду исспользовать :before или :after иконка добавиться до или после блока, а как именно внутрь добавить? Я просто не делал такого не разу

[Camaro67]

Андрей Рысь: Например, вложить иконку в этот самый блок. Тем-более icomoon сам создаст все необходимые стили и шрифты, остается только их использовать. А так вообще гугл в помощь, там материала по такой простой задаче навалом!

[Camaro67]

Андрей Рысь: И к стати вы совсем не понимаете как работаю before и after. Они добавляются совсем не до и после блока, а добавляют контент до и после. Это разные вещи.
Вот вам пример для понимания https://jsfiddle.net/01n1mcct/1/

[Super Star]

Camaro67: У меня сломался мозг после увиденного XD пора в психушку

Answer 3

[xmoonlight]

https://codyhouse.co/gem/css-breadcrumbs-and-multi...
DEMO