2016-11-30 3 views
3

Я следовал this SO answer, чтобы включить глификон в свой SVG, но он не работает.Как включить бутстрап-глификон в 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?

ответ

1

Ваше лицо ошибочно.

Объекты по умолчанию десятичные, а не шестнадцатеричные. Если вы хотите использовать шестнадцатеричный код, вы должны поставить x после #.

Кроме того, объект должен заканчиваться точкой с запятой. Так что вы должны были использовать:

&#xe003; 
+0

Это сработало, спасибо Пол! –

Смежные вопросы