在SVG中使用Bootstrap或FontAwesome图标字体

参考链接：

http://stackoverflow.com/questions/14984007/how-do-i-include-a-font-awesome-icon-in-my-svg

原理上都是使用了

content:"xxx"

属性，那么如何查询图标对应的编码呢？

可以在这个网站查询： http://glyphicons.bootstrapcheatsheets.com/。 包括各个图标的CSS规则及HTML实体编码

比如第一个图标的编码：



（在使用Unicode编码时候要补全4位，所以前面加两个零补全即可

\u002a

）

示例代码：

<svg width="500" height="500">
<!-- 直接使用HTML实体 -->
<text x="10" y="50" style="font-family:FontAwesome"></text>
</svg>
<script>
//使用CSS规则
d3.select("svg")
.append("text")
.attr("transform", "translate(50, 50)")
//引入FontAwesome字体
.attr("class", "fa")
.style("fill", "red")
.text('\uf05e')

d3.select("svg")
.append("text")
.attr("transform", "translate(100, 50)")
//引入Glyphicon字体
.attr("class", "glyphicon")
.style("fill", "pink")
.text("\u002a")
</script>

效果：