Question

目前，我通过使用按钮的背景来创建带有图标的按钮，就像在我的示例中一样（这可能是我遇到问题的原因）。

我想知道是否可以通过CSS更改图标的颜色吗？因为此刻我们必须多次保存相同的图标以使用不同的颜色（黑色，白色，彩色版本等）

如果这是不可能的，我必须使用，有人可以告诉我一个制作svg类型按钮的示例，以及如何更改它的颜色。

.btn-icon {
  border: 1px solid black;
  height: 40px;
  width: 40px;
  padding: 0px;
  background: url("https://image.flaticon.com/icons/svg/1034/1034153.svg");
  background-size: cover;
}

<button class="btn-icon"></button>

Answer 1

有关此问题的Modify SVG fill color when being served as Background-Image Adel的答案

这对我来说似乎是一个了不起的解决方案：

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

Answer 2

我认为您应该使用

background-color: yellow;

在CSS中

CSS更改按钮背景图标颜色

2 个答案: