css - 使用单个棘轮图标作为嵌入式CSS

我只使用了棘轮收藏中的一个图标（http://goratchet.com/components/）。我想知道是否可以将图标的SVG定义直接嵌入到我的'.css'文件中。

即就像是..

.tick {
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml ... *svg-definition-in-here* ...
}

ratchicons.svg中感兴趣的图标的代码是...

<glyph glyph-name="check" unicode="&#xe810;" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z" horiz-adv-x="1000" />

最佳答案

如果将字形数据嵌入到路径中并进行转换，那么这是另一种方法。

html, body, svg {
  width : 100%;
  height: 100%;
  display: block;
  margin: 0;
  border: 0;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -900 900 900">
  <path transform="scale(1, -1)" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z"/>
</svg>

然后，您需要做的就是将其嵌入...

.tick {
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -900 900 900"><path transform="scale(1, -1)" d="m857 537l-81 83l-354-372l-135 128l-81-83l216-211l435 455z"/></svg>')
}

<div class="tick"></div>

关于css - 使用单个棘轮图标作为嵌入式CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33331374/