I have a collection of icons that I would like to incorporate into my application. These icons primarily consist of glyphicons with a few others mixed in. I want the HTML structure to mimic that of a glyphicon, specifically:
<a href="#">
<span class="glyphicon glyphicon-wrench"></span>
Normal Link
</a>
<a href="#">
<span class="glyphicon blue .glyphicon-wrench"></span>
Blue Link
</a>
While I understand that glyphicons are technically fonts and not images, certain limitations prevent me from relying on the font being installed or available, so I must 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');
}
The challenge lies in the need to have icons in different colors at various locations. Hence, I aim to use the ".blue" class and ".white" class to adjust the image color accordingly. Currently, I accomplish this by creating separate color variants for each icon:
.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 find it cumbersome to create multiple image variations and repeat these steps for each color option. Is there a way to apply a filter to the Background-Image property of an HTML element, such as:
.glyphicon .blue {
background-filter: RGB(0,0,1);
}
Note:
I am aware that filters can be applied to IMG tags, but I require the ability to apply them to a background image. Additionally, the icons feature transparent backgrounds which must remain intact, necessitating a filter that affects only the foreground image.
Thank you in advance,