Change the color of background image using css

Question

I have a library of icons I want to use in my application. These are mostly glyphicons but with a few others thrown in. I'm wanting the html to look the same as would be defined for a glyphicon, namely

<a href="#">
    <span class="glyphicon glyphicon-wrench"></span>
    Normal Link
</a>

<a href="#">
    <span class="glyphicon blue .glyphicon-wrench"></span>
    Blue Link
</a>

I realize that glphicons are actually a font , not images typically, but due to requirements that are beyond my control I can't rely on the font being installed/available; so I have to use background images instead.

CSS:

.glyphicon {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 5px;
    content: "";
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
}

.glyphicon .glyphicon-wrench: {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-440-wrench.png');
}

.glyphicon .glyphicon-envelope {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-11-envelope.png');
}

.glyphicon .glyphicon-info-sign {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-196-info-sign.png');
}

.glyphicon .glyphicon-danger {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-197-exclamation-sign.png');
}

This issue is that I need the icon to be different colors in different places. So I want the ".blue" class and ".white" class to change the image color accordingly. Right now I'm doing this by creating a using a image editor to create a different color image and having a section for each color:

.glyphicon .blue .glyphicon-wrench: {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-440-wrench-blue.png');
}

.glyphicon .blue .glyphicon-envelope {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-11-envelope-blue.png');
}

.glyphicon .blue .glyphicon-info-sign {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-196-info-sign-blue.png');
}

.glyphicon .blue .glyphicon-danger {
    background-image: url('../images/glyphicons_free/glyphicons/png/glyphicons-197-exclamation-sign-blue.png');
}

I really don't like having to create all these extra images though and repeat myself for each color. Is there a way that I can apply a filter to the Background-Image of a html element, something like...

.glyphicon .blue {
     background-filter: RGB(0,0,1);
}

note

I know it is possible to apply a filter to an IMG tag, I need to be able to apply one to a background-image . These icons also have transparent backgrounds which need to remain transparent.... So I need a filter that only affects the image's foreground.

Thanks in advance,

Answer 1

If you can't use fonts, try inlining an SVG sprite at the top of your html.

Hide the SVG sprite itself, but you can reference each icon of the sprite via its unique id later in your html with the <use> element .

Set fill color within the SVG with fill="currentColor" , you can add color with CSS to a any parent node to control the color of each icon instance.

 #svgSprite { display: none } .blue { color: blue; } .red { color: red; } .green { color: green; } .yellow { color: yellow; } .blue:hover { color: navy; } .red:hover { color: maroon } .green:hover { color: DarkGreen; } .yellow:hover { color: DarkOliveGreen; } 

 <svg id="svgSprite" viewBox="0 0 122 122"> <g id="checkbox"> <rect x="3.5" y="3.5" width="115" height="115" stroke="black" stroke-width="5" fill="none"/> <path d="M57 110L15 62L57 85L107 14L57 110Z" fill="currentColor"/> </g> </svg> <div class="icon blue"><svg><use href="#checkbox"/></svg></div> <div class="icon red"><svg><use href="#checkbox"/></svg></div> <div class="icon green"><svg><use href="#checkbox"/></svg></div> <div class="icon yellow"><svg><use href="#checkbox"/></svg></div>