Question

我有一个这样的按钮设置：

<button class="buttonclass"><i class="iconclass plus-icon"></i></button>

我的css类看起来像这样：

.buttonclass {
  width: 30px;
  height: 30px;
  text-align: center;
  position: relative;
  border-radius: 20px;
  background-color: #1DBE60
}

.iconclass {
  width: 20px;
  height: 20px;
  margin: 7.5px;
}

.buttonclass .iconclass {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.plus-icon {
  content: url(http://uxrepo.com/static/icon-sets/mfg-labs/svg/plus.svg);
}

如何更改＆＃39; plus-icon＆＃39;的颜色？用css如果它是一个SVG？我已经尝试将填充类添加到svg，颜色类，背景类等。

这是一个插件： http://plnkr.co/edit/6fLYQlpFmDdf7aWenBtp?p=preview

Answer 1

如果您乐意添加一个额外的类（对于加号图标的颜色），那么这里是使用currentColor CSS变量的纯CSS解决方案：

.buttonclass {
  width: 30px;
  height: 30px;
  text-align: center;
  position: relative;
  border-radius: 20px;
  background-color: #1DBE60
}

.iconclass {
  width: 20px;
  height: 20px;
  margin: 7.5px;
}

.buttonclass .iconclass {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.plus-icon {
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="0" y="0" width="8" height="8" fill="rgb(29,190,96)" /><rect x="0" y="12" width="8" height="8" fill="rgb(29,190,96)" /><rect x="12" y="0" width="8" height="8" fill="rgb(29,190,96)" /><rect x="12" y="12" width="8" height="8" fill="rgb(29,190,96)" /></svg>');
background-color: currentColor;
border: 1px solid rgb(29,190,96);
border-radius: 15px;
}

.white {
color: rgb(255,255,255);
}

.yellow {
color: rgb(255,255,0);
}

.green {
color: rgb(0,255,0);
}

<button class="buttonclass"><i class="iconclass plus-icon white"></i></button>
<button class="buttonclass"><i class="iconclass plus-icon yellow"></i></button>
<button class="buttonclass"><i class="iconclass plus-icon green"></i></button>

Answer 2

您必须将svg内联，但请考虑使用if window.navigator and window.navigator.msSaveOrOpenBlob blob = new Blob([ data ], type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') window.navigator.msSaveOrOpenBlob blob else blob = new Blob([ data ], type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') objectUrl = URL.createObjectURL(blob) window.open objectUrl元素，以便您可以通过引用它多次使用图标：

http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

Answer 3

我最终在这里寻找一种为svg图标着色的方法。投票最多的答案对我没有帮助，所以经过一些谷歌搜索我遇到了这个有趣的codepen。

长话短说我用这个css上色了我的svg图标：

.plus-icon {
    -webkit-mask: url('../images/plus.svg') no-repeat 50% 50%;
    mask: url('../images/plus.svg') no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
}

.white {
    background-color: rgb(255,255,255);
}

<强>更新

不使用IE浏览器。

用css着色SVG内容网址

3 个答案: