从白色icon.png到蓝色icon.png (html/css)

Question

白色icon.png转蓝色icon.png (html/css)

之前它是白色的icon.png。之后它也有白色。如何制作，例如，蓝色icon.png？

html：

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

css：

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

或者这个

html：

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

css：

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

你能教我怎么做吗？不是photoshop，只有html和css。

Answer 1

可能与mask-image配合使用

如你所见

​

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>

​

Answer 2

您还可以使用Bootstrap和字形图标。使用Bootstrap，你可以像这样使用HTML来创建内联图标：

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

有一些方法可以在深色背景上将这些图标涂成白色。

Here是受支持图标的列表。