Adjust the background image color with CSS styling

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,

htmlcss

Answer №1

For those unable to utilize fonts, one alternative is to inline an SVG sprite at the beginning of your HTML code.

The SVG sprite can be hidden, but you are able to reference each individual icon within the sprite using its unique ID later in your HTML using the <use> element.

To set the color within the SVG file, use fill="currentColor", and then apply a specific color attribute with CSS to a parent node in order to control the color of each instance of the icon.

#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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent horizontal scrolling on mobile devices

To prevent vertical scrolling on mobile devices, I attempted using the CSS code: body {overflow-x:hidden} This successfully disables vertical scrolling in regular browsers. However, if there is an element wider than the screen on mobile, it still allows ...

jqueryhtmlcss

Do not activate hover on the children of parents using triggers

Check out my demonstration here: http://jsfiddle.net/x01heLm2/ I am trying to achieve two goals with this code. Goal number one is to have the mini thumbnail still appear when hovering over the .box element. However, I do not want the hover event to be tr ...

javascriptjquerycss

Adjust the appearance of a specific element

When it comes to styling my HTML tags, I prefer a definitive approach. However, there is one particular tag that I want to exempt from this style choice. Is there a way to achieve this? ...

htmlcss

Quick method to assign child iframe title as index.html <title>title</title>

Is there a simple method to dynamically update the <title> of my index.html based on the <title> of a child iframe? Take a look at my website for reference If the content within the iframe changes, will the title automatically update along wi ...

javascriptjqueryhtmliframetitle

What is the best method in JavaScript to create three different shades of a color?

My sass function generates lighter and darker versions of a base color, here is the code snippet: $colors: ( betpawa-green: #107A3D, lime-green: #8DC63F, yellow: #FBCD00, ); @mixin color-generator { @each $name, $hex in $colors { &-#{$nam ...

javascripthtmlfor-loopsasstemplate-literals

Adjusting the size of HighCharts HighMaps with a custom function

Simple query here (I believe) I have a DIV with the class "container" acting as my Map. The Highcharts plugin I'm using is responsive, but it only resizes when the window does. I'm looking to manually trigger a resize without adjusting my windo ...

javascriptjqueryhtmlcsshighcharts

Is there a way to output several lines from a JSON file in print form?

I'm working with HTML code that displays multiple lines from a JSON file, but it only shows one line at a time. How can I modify the code to display all users' information? <!DOCTYPE html> <html> <head> <script> function ...

javascripthtmljson

Enclose elements in a div using a jQuery each function

I have successfully parsed data from an XML feed to JSON, but now I want to wrap each part of the data within a div. Here is the code snippet I am working with: var newsDiv = $('<div class="news-feed">').appendTo($("body")); $(release ...

javascriptjqueryhtmleach

Incorporate Javascript to smoothly transition a div into view, display it for a specified duration, gradually fade it out, and ultimately delete

I am excited to experiment with toast notifications by creating them dynamically. Each toast has a unique id number and I increment a counter every time a new one is created. The current functionality includes the toast sliding down, staying visible for 3 ...

javascriptjqueryhtmlcss

A step-by-step guide on using a loop to display three images per row

The issue at hand is quite logical... I'm attempting to create a photo gallery by fetching image URLs from a database... The problem arises when I try to display them in HTML. I'm using bootstrap for the layout, where each row should contain 3 im ...

phphtmlbootstrap-4logic

What is the best method for animating a display table to none or reducing its height to

My goal is to animate a header whenever the class collapseTest is applied. After some trial and error, I have come up with the following solution: http://jsfiddle.net/robertrozas/atuyLtL0/1/. A big shoutout to @Hackerman for helping me get it to work. The ...

javascriptcssanimation

MUI provides the flexibility to adjust the opacity separately for Chip labels/icons and backgrounds

My objective is to customize the opacity of label/icon and background in MUI Chip. I want the label & icon to have an opacity of 1, while the background should have an opacity of 0.0571. Technologies used in this project include React, TypeScript, Materia ...

cssreactjstypescriptmaterial-uiopacity

Mediawiki needs to be able to respond effectively to constantly changing and evolving content

My extension generates content dynamically for certain pages. For example, I create headlines using <html> <h1>, <h2> and <h3> tags. I want my mediawiki to respond to these headlines and generate a directory dynamically. I attempte ...

phphtmlmediawiki

An unusual type of data is being stored in a MySQL database through Navicat Premium while using Django

Recently, I've encountered an issue while trying to insert data from an HTML form into my database. Strangely, upon submission, the values for "gender" and "website rating" get replaced with "on" instead of the actual input provided through the websit ...

pythonhtmlmysqldjango

React - Styling with Pseudo Element on Input Element not displayed properly

I'm struggling to understand why an ::after element is not displaying on an input element, but is working fine on a div. I'm attempting to create a performance-friendly focus effect for an input element, where it glows when in focus using the af ...

cssreactjspseudo-element

Combining shared table rows with embedded ruby code in Javascript - is it possible?

I'm a new Javascript learner and I'm attempting to create a function that will merge rows with the same value (year in this case) and add their numbers together. Although my code isn't functioning as expected, it also doesn't seem to be ...

javascriptjqueryhtmlruby-on-railsruby

Text displayed in a pop-up when hovering

I'm in search of suggestions for creating a text pop-up that displays when the mouse hovers over specific text. After researching numerous websites, I haven't found exactly what I need. Currently, I have a table with headers at the top and I woul ...

c#javascriptjqueryhtmljquery-hover

When you hover over them, Material UI icons shrink in size due to the Border

I've been working on a React application that includes Material UI icons in the header. My goal is to add a border at the bottom of each icon when hovered over, but currently, the borders are too close to the icons. Another problem I'm facing is ...

javascripthtmlcssreactjsmaterial-ui

Having issues with Bootstrap flip div not functioning properly when clicked on a mobile device?

I am currently working on a website and encountering an issue. Here is the code snippet I am using: https://jsfiddle.net/3caq0L8u/ The objective is to flip a div when a button is clicked. The button responsible for flipping the div resides in both the " ...

javascriptjqueryhtmlcsstwitter-bootstrap

In order to position an inner div in the center and have it expand equally at the top and bottom according to the content size

I am currently working on a layout that involves an inner div with a text div. My goal is to center the inner text div vertically and increase the size of the text div equally from both the top and bottom based on the content size. Below is the approach ...

htmlcss