如何在 SVG 中包含引导字形图标答案

【问题标题】：How do I include a bootstrap glyphicon in SVG如何在 SVG 中包含引导字形图标
【发布时间】：2017-04-14 08:51:40
【问题描述】：

我按照this SO answer 在我的 SVG 中包含字形图标，但它不起作用。

这是我要实现图标的 SVG 代码：

  <text
    ng-attr-x="{{node.width/2}}"
    ng-attr-y="{{node.height/2+5}}"
    text-anchor="middle"
    ng-attr-fill="{{(node.activity.act_task==3 || node.activity.act_task==4)?'#FFFFFF':'#000000';}}">
    <tspan x="130" dy="0em">&#e003</tspan>
    <tspan x="130" dy="1.2em" ng-show="node.activity.act_type == 1 && node.height > 30"><a target="_blank" href="http://{{node.activity.act_info_url}}" style="text-decoration: underline">{{node.activity.act_info}}</a></tspan>
  </text>

我添加到我的 css 文件中：

svg text{
  font-family: 'Glyphicons Halflings';
}

但这没有用，它只是将&#e003 显示为文本，而不是我之后的搜索图标，而glyphicon-search 图标。我也试过/e003 & &e003 和#e003 但没有任何运气。

有没有办法可以将字形图标添加到 svg 组件中？

【问题讨论】：

标签： css svg

【解决方案1】：

你的实体错了。

实体默认是十进制的，而不是十六进制的。如果你想使用十六进制，你必须在#之后加上一个x。

此外，实体必须以分号结尾。所以你应该使用的是：

&#xe003;

【讨论】：