CSS伪类::before、::after中使用svg图标

之前用的 iconfont.css 可以设置伪类元素的字体为 iconfont ，然后给伪类的 content 属性值定义 iconfnt 的图标标识就能正常显示了。

但是最近精简代码我把 iconfnt.css 移除了，只保留了 iconfnt.js，这样之前 css 中用上面方法引用的图标失效了。

就一个图标，总不能再把那么大的 css 引进来吧，可以不以直接给伪类设置一个 svg 图标呢？当然是可以的：

给CSS伪类设置svg图标

有两种方式：

设置 content 属性：

#test::before {
  content: url(path/icon.svg);
  width: 200px;
  height: 200px;
}

这种有一个问题，不能设置 svg 的颜色和大小，只能通过修改 svg 代码来实现。

设置 background：

#test::before {
  background-image: url(path/icon.svg);
  width: 20px;
  height: 20px;
  display: inline-block;
}

这样可以通过 background-size 来实现改变图标大小，也无法设置图标的颜色。