Change the color of the icon from white to blue in png format using html/css

Changing a White Icon.png to a Blue Icon.png Using HTML/CSS

The original icon.png is white in color. How can we change it to a blue color version using only HTML and CSS?

HTML:

<img src="icon.png" class="icon1">

CSS:

.icon1 {
 background: url(icon.png);
 color: blue;
}
//This code is not producing the desired effect

Alternatively, you could try this:

HTML:

<img src="icon.png" class="icon2">

CSS:

.icon2 {
 color: blue;
}
//Unfortunately, this code is also not working as expected

Do you have a solution that doesn't involve Photoshop, but rather uses only HTML and CSS?

Answer №1

You can achieve this using the mask-image property.

Check out this example:

div {
  width: 600px;
  height: 600px;
  background-color: blue; /* choose your preferred color */
  -webkit-mask-image: url(https://image.flaticon.com/icons/png/512/54/54591.png);
  mask-image: url(https://image.flaticon.com/icons/png/512/54/54591.png);
  mask-repeat:no-repeat;
  -webkit-mask-repeat:no-repeat;
}
<div></div>

Answer №2

If you want to incorporate icons into your website, consider using Bootstrap and glyphicons. Bootstrap allows for inline icons with simple HTML code like:

<span class="glyphicon glyphicon-question-sign"></span>

There are even methods to make these icons appear white on dark backgrounds.

Check out this list of supported icons for more options.

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

Tips for capturing text input from a Quill rich text editor div

My attempt to retrieve the content entered in Quill editor's editor div using jQuery codes is not proving successful. Although it works for other text inputs, it fails to do so for the editor div. Below is a demonstration of the issue: $(function() ...

What are the best practices for incorporating keywords into HTML code for SEO purposes?

Even though this topic is borderline related to programming questions, I believe it's still relevant here. After all, only those of us who are actually coding for a website would be considering this aspect. Lately, I've been delving deeper into ...

Unable to align my navigation bar in the center

My navigation bar code is not centering on the website. Even after removing float: left, it doesn't move to the desired position. Can anyone help me with this issue? Thank you. css ul#list-nav { list-style: none; margin: 20px auto; paddi ...

Inspect HTML elements using Jinja2 placeholders

I am a beginner in the world of web development, currently learning how to create Flask webapps. I am using Atom along with some addons like PreviewHTML to help me visualize live previews of my HTML code. However, I am facing an issue where I cannot see a ...

Issue with jQuery: Changes are not being triggered and clicks are also not working

I managed to recreate the modifications of my complex script in a simple jsfiddle, which can be found here. Below is the code I am working with locally: HTML <input type="text" id="rangeStart" value="updateMe" /><br/> <input type="text" c ...

Looking for assistance with CSS to properly align a dozen items

UPDATE: See the current layout in this JFiddle based on feedback received from others, still a few tweaks needed. In my setup, there are 12 divs housed within one container div. These 12 divs consist of 6 text components and 6 corresponding input fields. ...

How can I adjust the Line Opacity settings in Google Charts?

Within my Google Charts project, I have successfully implemented a feature that changes the color of a line halfway through a graph based on certain conditions using a dataView. Here is the code snippet demonstrating this functionality: var dataView = new ...

Disappearing Into the Background Excluding Specific Divs

I have a dilemma with fading in and out a background image using jQuery fadeIn and fadeOut. The issue arises because my wrapper div contains elements such as sidebar and navigation that are positioned absolutely within the wrapper div, causing them to also ...

Revolutionary scroll-based navigation fill transition

I'm attempting to achieve an effect where the fill color of the "insticon" SVG changes from black to white based on the scroll position indicated in the jQuery code. I have made the necessary modifications in the if and else statements, but unlike "he ...

Shifting HTML table in Javascript by toggling checkboxes

When I click the checkbox, the table elements are not displaying inline. I am simply hiding the class "box". Do I need to write a special format? By default, the elements are displayed inline but when I check the checkbox, they shift. The column 'Stat ...

Error sound produced when detecting KeyCode on the keyboard

I'm currently working on a JavaScript project that involves capturing keyboard input. However, I'm encountering an issue where every time the user presses a key, it triggers an error sound. Is there a way to disable this sound? ...

Designing personalized visual elements that can be colored using HTML and CSS

https://i.sstatic.net/wILgJ.jpg I have a custom graphic that needs to be filled with three different colors. Each color will fill from 1% to 100%. For example, the blue color should fill from the legs to the head (1-100%), the red color should fill from t ...

Incorporating a vertical slider alongside a fullPage.js section for a dynamic user experience

Is there a way to achieve a transition effect similar to this example for fullPage.js section-elements? <div id="fullpage"> <div class="section"></div> <div class="section"></div> </div> I have experimented with var ...

The mask effect is not only darkening the background image but also affecting the color of my header content

Why is the mask I applied making not only my background image darker but also my h1 and button? <!-- Header - set the background image for the header in the line below--> <header class="bg-image d-flex justify-content-center al ...

Arrows on the button are unresponsive and there seems to be an incorrect number of

I've been working on a project by combining various examples I found online. I'm puzzled as to why it's displaying all the buttons at once instead of just one per page, and why the number of visible buttons decreases by one with each right c ...

Switch out div elements for td elements in HTML code

I have written a code snippet that successfully toggles between showing and hiding content. Here is the code: Simple collapsible Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliq ...

Utilizing Selenium for automating button clicks

When attempting to click a button represented by the following HTML code: <a href="javascript:submitPage('V','All Notes','');" class="viewFilter">All Notes</a> I have made multiple attempts to ...

Analyze HTML while maintaining the integrity of the initial content

I am facing a challenge with my HTML files. I need to replace certain elements while leaving the rest of the content untouched. Specifically, I am looking to run this jQuery expression (or something similar to it): $('.header .title').text(&apos ...

Ensure that every line of code within the button element contains all the required attributes

Struggling to get the underline on every section of my button. Attempted utilizing the -webkit-box-decoration-break property, but unfortunately it was unsuccessful. https://i.sstatic.net/jsGeQ.png It is necessary for both the initial line (New Delhi,) an ...

Issue with :visited pseudo-class not functioning as intended

My code includes all four basic pseudo-classes, and they all seem to be working fine except for the :visited pseudo-class. The color property doesn't function properly, and the background property appears to be inactive. I'm not sure what the iss ...