您可以添加SVG作为空的:after或:before的背景图像。

给你:

.anchor:before {
  display: block;
  content: ' ';
  background-image: url('../images/anchor.svg');
  background-size: 28px 28px;
  height: 28px;
  width: 28px;
}

你可以使用url() CSS函数。

#mydiv::before {
  content: url("data:image/svg+xml; utf8, <svg ... code here</svg>");
  display: block;
  width: 22px;
  height: 10px;
  margin: 10px 5px 0 10px;
}

确保您的SVG不包含任何#符号。使用像这样的编码器。

您可以添加SVG作为空的:after或:before的背景图像。

给你:

.anchor:before {
  display: block;
  content: ' ';
  background-image: url('../images/anchor.svg');
  background-size: 28px 28px;
  height: 28px;
  width: 28px;
}

.myDiv {
  display: flex;
  align-items: center;
}

.myDiv:before {
  display: inline-block;
  content: url(./dog.svg);
  margin-right: 15px;
  width: 10px;
}

使用一个空内容的背景蒙版图像，你可以在css中控制颜色:(不要忘记你喜欢的位置，宽度和高度)…!

background-color: red;
-webkit-mask-image: url(icon.svg);
mask-image: url(icon.svg);
content:'';

小心其他答案在IE中都有问题。

让我们有这种情况-按钮与前置图标。所有浏览器都能正确地处理这一点，但IE采用元素的宽度并缩放之前的内容以适应它。JSFiddle

#mydiv1 { width: 200px; height: 30px; background: green; }
#mydiv1:before {
    content: url("data:url or /standard/url.svg");
}

解决方案是将size设置为element之前，并将其留在原来的位置:

#mydiv2 { width: 200px; height: 30px; background: green; }
#mydiv2:before {
    content: url("data:url or /standard/url.svg");
    display: inline-block;
    width: 16px; //only one size is alright, IE scales uniformly to fit it
}

background-image + background-size解决方案也可以，但有点不方便，因为您必须指定两次相同的大小。

IE11的结果是: