将图标转换为SVG圆形

Question

将图标转换为SVG圆形

3

我该如何将图标（例如font-awesome）放入SVG元素中？

我希望这个图标在圆形中居中显示。

<svg class="svg" width=100 height=100>
    <circle cx=50 cy=50 r=25>
    </circle>    
    <i class="icon-check"></i>
</svg>

这里是一个测试： http://jsfiddle.net/L2Lm3fgm/

- nachbarshund

1

SVG没有“i”元素，您可以参考此处提到的内容进行操作 - 如何在SVG中包含Font Awesome图标？，或者使用绝对定位和可能的‘foreignObject’。 - Harry

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Abhitalks · Accepted Answer

只需找到 font-awesome 在其类中使用的字符代码，然后将该字符用作text节点。记得将circle和text节点组合在一起。

示例：

svg { 
    margin: 24px auto;
    display: block;
}
circle {
    fill: transparent;
    stroke: #f00;
    stroke-width: 2;
}
svg text#chk {
    font-family: sans-serif;
    font-size: 24px; 
    fill: #00f;
}

<svg class="svg" width=100 height=100>
    <g>
        <circle cx=50 cy=50 r=25></circle>    
        <text id="chk" x=42 y=58>&#x2713;</text>
    </g>
</svg>

示例Fiddle：http://jsfiddle.net/abhitalks/L2Lm3fgm/2/

这是一个关于IT技术的示例代码，你可以通过点击上面的链接查看。