Add icon from FontAwesome to SVG

Question

I'm trying to get the icons from FontAwesome to work in my SVG. And as I know the tag which is normally used, is not supported by SVG. So how would I get the icons to be displayed?

Some of the code:

<g id="symbolsContainer">
    <symbol class="icon icon-" id="icon-1" viewBox="0 0 40 40">
        <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">&#xf0c5;</text>
    </symbol>
</g>

Stylesheet:

svg text {
    font-family: FontAwesome;
}

When I use &#xf0c5 ; to display it, it only shows a little error square. Is that because FontAwesome isn't correctly included?

I've tried to use <path>, and it worked, but the needed icons were not to be found.

Possible duplicate of [How do I include a font awesome icon in my svg?](http://stackoverflow.com/questions/14984007/how-do-i-include-a-font-awesome-icon-in-my-svg) — Turnip, Jun 28 '16 at 23:05
@Turnip I checked that, but it didn't solve my problem, even thou it's the same.. Therefore I created a new.. — zero vacpls, Jun 28 '16 at 23:07
Be specific. What was the issue with the solution in that thread? — Turnip, Jun 28 '16 at 23:16
Well. The icon does not show up. I've followed the solution in the other thread. https://gyazo.com/71d92b76274ec73d694d8a213f5dd15c That little square is the only thing showing up¨ — zero vacpls, Jun 28 '16 at 23:20
@Turnip So there's not that much more to say. Other than it just doesn't work. — zero vacpls, Jun 28 '16 at 23:21
Yes there is. You haven't shown us your attempts to solve the problem or explained how they didn't work. All of this should be in your question. Otherwise your question is an exact duplicate of the one linked above. — Turnip, Jun 28 '16 at 23:23
That's all I have to say(updated question). Then you can decide wether this is still a duplicate or not. — zero vacpls, Jun 28 '16 at 23:33
What do you use to see your svg? browser? batik? How do you expect your viewer to find the font? I think there is something more to explain... — Stefan Hegny, Jun 29 '16 at 07:08

score 1 · Accepted Answer · edited May 23 '17 at 12:22

How are you using the SVG?

Is it inlined in the HTML?

If so, how are you telling the browser where to find the font? If the FontAwesome font is not in your system font folder, then you need to include the @font-face declaration from the top of the FontAwesome CCS file.

@font-face {
  font-family:'FontAwesome';
  src:url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),
      url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),
      url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),
      url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),
      url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight:normal;
  font-style:normal
}

and make sure all those fonts are included in your website and the URLs are correct.

or is it being imported via an <img> etc?

If so, then you'll need to include some or all of the font files in your CSS as Data URIs. See the following question for more info:

use FontAwesome icon in svg without external files

It's inlined in the html.. And waow. I totaly forgot that I didn't save the fonts to a folder in my project. Thanks for pointing it out! And sorry for the question. I'm new to this. And sometimes I skip important information. :/ Have a good one — zero vacpls, Jun 29 '16 at 12:30

Add icon from FontAwesome to SVG

1 Answers1