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

参考链接：
http://*.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">&#xf040;</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>

效果：