0

I've found myself in a situation with some legacy code using "content" NOT "background-image"

.icon-right-arrow:before {
    content: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%22114%22%20height%3D%2236%22%20viewBox%3D%220%200%20114%2036%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ctitle%3Earrow%3C/title%3E%3Cpath%20d%3D%22M96.93.86c-.643-.643-1.684-.643-2.326%200-.642.64-.642%201.682%200%202.324l13.173%2013.172H2.254C1.346%2016.356.61%2017.092.61%2018c0%20.908.736%201.644%201.644%201.644h105.523L94.604%2032.817c-.642.642-.642%201.683%200%202.325.32.32.742.482%201.162.482.42%200%20.84-.16%201.162-.482l15.98-15.98c.307-.307.48-.725.48-1.16.002-.438-.17-.856-.48-1.164L96.928.858z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E);
}

This displays a black SVG (guessing the fill = "currentColor" isnt working too well)

However I need to change this fill colour using CSS for different areas of a page, normally if the SVG is embedded into the HTML normal css works, but I cannot get it it work this way, I've tried a few things and none have worked.

Is what I'm trying to do even possible? I've tried the below

.icon-right-arrow:before {
        content: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%22114%22%20height%3D%2236%22%20viewBox%3D%220%200%20114%2036%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ctitle%3Earrow%3C/title%3E%3Cpath%20d%3D%22M96.93.86c-.643-.643-1.684-.643-2.326%200-.642.64-.642%201.682%200%202.324l13.173%2013.172H2.254C1.346%2016.356.61%2017.092.61%2018c0%20.908.736%201.644%201.644%201.644h105.523L94.604%2032.817c-.642.642-.642%201.683%200%202.325.32.32.742.482%201.162.482.42%200%20.84-.16%201.162-.482l15.98-15.98c.307-.307.48-.725.48-1.16.002-.438-.17-.856-.48-1.164L96.928.858z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E);

    fill: green;

    svg {
        fill: purple;
    }

    path {
        fill: red;
    }

    * {
        fill: yellow;
    }
}
owenmelbz
  • 6,180
  • 16
  • 63
  • 113
  • 1
    @Paulie_D this is not a duplicate - this refers to using `content` not background images. Please unmark! – owenmelbz Jan 22 '16 at 15:06
  • It's not a *precise* duplicate but the answer there applies here so it **is** a duplicate....here's another - http://stackoverflow.com/questions/16358104/how-do-i-change-the-colour-of-an-svg-image-in-a-css-content-property – Paulie_D Jan 22 '16 at 15:07
  • So the same answer..."no possible" rather than same question... I feel the answer "not possible" matches many posts on stackoverflow, I guess you should get your fingers busy marking every question with "not possible" as a duplicate then! – owenmelbz Jan 22 '16 at 15:09
  • Better update the "duplicate post" then to point to the appropriate post then – owenmelbz Jan 22 '16 at 15:11

0 Answers0