Как сделать такой цвет у иконки?

Question

[Лев Яковлев]

В данном изображении используется background: linear-gradient;
Нужно закрасить именно иконку, а не фон. То же самое с инстаграмом

Comments

[WapSter]

Закрасить ее svg вариант и вставить ее.

[Rustam Bainazarov]

Либо писать правила для всех путей (это долго + нужно в разметку вставлять SVG напрямую и без #use).

Либо так с двумя блоками, которые показываются по очереди при наведении:



Только для простоты нужно либо просто на фон вешать, либо выносить в спрайт и вызывать иконку через #use. Я просто SVG в разметку вставил для скорости. Мне нормально делать лень, думаю, идея будет понятна в любом случае.

[0ffff0]

В данном изображении используется background: linear-gradient;

Это же гениально!
Теперь используйте это-же самое изображение как спрайт

[0ffff0]

Как:
https://learn.javascript.ru/css-sprite

Сдвиг фона background-position позволяет выбирать, какую именно часть спрайта видно.
В спрайте icons.gif изображения объединены так, что сдвиг на 16px

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