Search code examples
csssvg

How do I include a bootstrap glyphicon in SVG

I followed this SO answer to include glyphicons in my SVG but it's not working.

This is the SVG code that I want to implement the icon into:

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

and I added to my css file:

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

But that didn't work, it just shows the &#e003 as text instead of the search icon i am after which is the glyphicon-search icon. I also tried /e003 & &e003 and #e003 but without any luck.

Is there a way I can add in glyphicons into svg components?

Solution

  • Your entity is wrong.

    Entities are by default decimal, not hexadecimal. If you want to use hexadecimal, you have to put an x after the #.

    Also, the entity must end with a semicolon. So what you should have used is:

    &#xe003;