Цвет фона SVG не работает на Firefox

Question

Я столкнулся с некоторыми проблемами, связанными с использованием svg. У меня есть следующие HTML и CSS коды

<i id="iconApp" class="icon_approved icon_lg pull-right"></i> 

.icon_approved { 
    background-color: #fab700; 
    display: block; 
    mask: url(../Tick-Solid.svg) no-repeat 50% 50%; 
    -webkit-mask: url(../Tick-Solid.svg) no-repeat 50% 50%; 
    background: url(../Tick-Solid.svg) no-repeat 50% 50%; 
} 

The mask не работает на Firefox, поэтому вместо этого я добавил background собственность, и она работает так, как я хотел, чтобы это было. Однако цвет не работает должным образом. Вместо того, чтобы иметь цвет #fab700, вместо этого он интерпретируется как фоновый цвет.

Оранжевый должен быть цвет иконы, а не цвет фона.

Дополнительная информация:

Я не могу найти слова для поиска искать такого рода проблемы, но я нашел что-то похожее на мою проблему.

Ссылка: http://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

После глядя на первом примере, он делает правильно на хром. Но если вы открыли ссылку на firefox, она появится в виде ящиков (я предполагаю, что это цвет фона элемента).

Answer 1

Вы не можете изменить цвет содержимого SVG по ссылке background-image. Все настройки background-color делает установленный задний фон. Это то, что вы видите здесь.

Если вы хотите изменить цвет значка, вам необходимо изменить SVG-файл. Или вы можете встроить SVG в HTML, это также возможно сделать с помощью элемента <object>.

Answer 2

Попробуйте

.icon_approved { 
 
    fill: #fab700; 
 
}