CODEWITHSUNDEEP
svgicons
zero vacpls
zero vacpls

Reputation: 115

Add icon from FontAwesome to SVG <text>

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.

Upvotes: 0

Views: 4252

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

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

Upvotes: 1

Related Questions