在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>

效果：