如何在SVG中包含bootstrap glyphicon

时间:2016-11-30 06:09:30

标签: css svg

我跟着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&amp; &e003#e003,但没有任何运气。

有没有办法将glyphicons添加到svg组件中?

1 个答案:

答案 0 :(得分:3)

你的实体是错的。

实体默认为十进制,而不是十六进制。如果您想使用十六进制,则必须在x之后添加#

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

&#xe003;