Задать заливку svg в css

#css #html5 #css3 #svg

Всем доброго времени суток! Решил попробовать использовать svg-файлы в верстке, но
столкнулся с проблемой - не задается цвет заливки. Пытаюсь прописать через fill, но тщетно.
Вот код css



.icon {
  background: url("img/icons/book.svg");
  background-size: 15px 16px;
  width: 15px;
  height: 16px;
  fill: #ffb600;
}




вот svg








в итоге иконка заливается черным, хотя по идее должна быть желтой. 
Прошу помощи опытных. Спасибо!
    

Ответы

Ответ 1

Вот обсуждение этой проблемы на английском: https://stackoverflow.com/questions/13367868/modify-svg-fill-color-when-being-served-as-background-image

Фактически, ответ такой: background-image не является частью DOM, поэтому манипулировать
им нельзя. Поэтому путей решения два:

Не ставить svg на фон, а просто включить в документ: http://jsfiddle.net/pn640zLt/



  



Или же манипулировать содержимым собственно SVG на лету с помощью JS, примеры выше
по ссылке.


Ответ 2

Класс icon надо задать path, a не svg и всё будет.




Ответ 3

В некоторых случаях можно создать маску/негатив целевого SVG, а вот фон под этой
маской уже менять в DOM  обычными методами.


Ответ 4

Используй




как в fontawesome

у меня сработало