dovy/elusive-iconfont

How to use the font glyphs in svg

Closed this issue · 6 comments

jmaynier commented

I try to use the Elusive fonts in SVG text element without success.

In my test, nothing is displayed (even the second tspan)

 Test

Is it possible to use those icons in SVG and how ?

aristath commented

How exactly are you trying to use them?
Can you post some example code here?

jmaynier commented

Sorry I forgot to put my code example in markdown format so it had been stripped out.

I tried to used it this way:

<text style="fill-opacity: 1; fill: #000000;" text-anchor="start" >
      <tspan x="0" style="font-family: Elusive-Icons;">&#xe0f5;</tspan>
</text>
aristath commented

To be frank I've never used the svg-text element so I can't really answer that question.
From what I can tell though ftom this page http://www.w3schools.com/svg/svg_text.asp you have to wrap it in an <svg> element like this:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text style="fill-opacity: 1; fill: #000000;" text-anchor="start" > <tspan x="0" style="font-family: Elusive-Icons;">&#xe0f5;</tspan> </text> </svg>

jmaynier commented

It does not work and print a  character.

aristath commented

Are you sure you've followed the instrauctions in http://aristath.github.com/elusive-iconfont/#integration ?
'Cause that symbol indicates that the webfont is not detected.

jmaynier commented

You right, my font path was not correct. It workd now.
Thanks a lot for your help.