CODEWITHSUNDEEP
htmlcss
Dani
Dani

Reputation: 9

White color icon.png to blue color icon.png (html/css)

White icon.png to color blue icon.png (html/css)

Before it is white color icon.png. After it has also white color. How to make, example, blue color icon.png?

html: 

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

css:

icon1 {
 background: url(icon.png);
 color: blue;
}
//not working

or this

html:

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

css:

icon2 {
 color: blue;
}
//also not working

Can you show me how? Not photoshop, only html and css.

Upvotes: 0

Views: 1194

Answers (2)

pid
pid

Reputation: 11607

You can also use Bootstrap and glyphicons. With Bootstrap you'll be able to have inline icons by using HTML like this:

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

There are ways to color these icons white on dark backgrounds.

Here is a list of supported icons.

Upvotes: 1

doğukan
doğukan

Reputation: 27421

possible with mask-image

as you can see

div {
  width: 600px;
  height: 600px;
  background-color: blue; /* select your want 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>

Upvotes: 2

Related Questions