CSS 更改按钮背景图标颜色 [英] Css Change Button Background Icon Colour

问题描述

目前我使用按钮的背景创建带有图标的按钮，就像在我的例子中一样(这可能是我的问题的原因).

Currently I create buttons with icons by using the button's background, like in my example (this is probably the reason for my problem).

我想知道是否可以通过 CSS 更改图标的颜色?因为目前我们必须为不同的颜色(黑色、白色、彩色版本等)多次保存相同的图标

I would like to know if it is possible to change the colour of the icon from the CSS? Because at the moment we have to save the same icon multiple times for different colors (black, white, colored versions etc.)

如果这是不可能的并且我必须使用 ，请有人向我展示制作 svg 类型按钮的示例以及如何更改它的颜色.

If this is not possible and I have to use , could someone please show me an example of making an svg type button and how to then change it's color.

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

推荐答案

对于 Adel 在这个问题中的回答 在用作背景图像时修改SVG填充颜色

For Adel's answer in this question Modify SVG fill color when being served as Background-Image

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

This seem to be an amazing solution for me:

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

这篇关于CSS 更改按钮背景图标颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！