Use Fontawesome Icon in Svg Without External Files

use FontAwesome icon in svg without external files

Your example is an SVG Font and it doesn't work on IE or Firefox. You need to encode FontAwesome as a data URI and embed as a @font-face if you want it to work everywhere:

<svg width="500" height="200" version="1.1" xmlns = 'http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 200">  
    <defs>
      <style type="text/css">
        @font-face {
          font-family: 'FontAwesome';
          src: url(data:font/opentype;base64,[...]) format('opentype');
        }
      </style>
    </defs>
    <rect x="0" y="0" height="100" width="500" fill="#eee" />
    <text x="20" y="50" font-family="FontAwesome" font-weight="normal" font-size="32">
      
    </text>
  </svg>

Replace the [...] with the base64 encoded version of the font. You can upload a .ttf or an .otf file to a base64 service or the command line openssl base64 -in <infile> -out <outfile>.

If you want to subset the FontAwesome's library you can head to icomoon http://icomoon.io/app/#library and add the FontAwesome library. Then select the icons you need, download the zip, then upload the ttf to a base64 encoding service such as this http://www.opinionatedgeek.com/dotnet/tools/base64encode/ and paste the resulting string to your src: font-face declaration.

How do I include a font awesome icon in my svg?

i is not valid SVG. You need to include the actual character that displays the icon. If you take a look at font awesome's stylesheet you will see...

.icon-group:before                { content: "\f0c0"; }
.icon-link:before                 { content: "\f0c1"; }
.icon-cloud:before                { content: "\f0c2"; }
.icon-beaker:before               { content: "\f0c3"; }
.icon-cut:before                  { content: "\f0c4"; }
.icon-copy:before                 { content: "\f0c5"; }
.icon-paper-clip:before           { content: "\f0c6"; }
.icon-save:before                 { content: "\f0c7"; }
.icon-sign-blank:before           { content: "\f0c8"; }
.icon-reorder:before              { content: "\f0c9"; }
.icon-list-ul:before              { content: "\f0ca"; }
.icon-list-ol:before              { content: "\f0cb"; }
.icon-strikethrough:before        { content: "\f0cc"; }
.icon-underline:before            { content: "\f0cd"; }
.icon-table:before                { content: "\f0ce"; }

But those are unicode characters encoded for CSS. In SVG you would need to change the syntax of example \f040 to:

<g><text x="0" y="0"></text></g>

And then in your stylesheet add:

svg text {
   font-family: FontAwesome;
}

According to Niek's comment, if you use the free version of Font Awesome 5+, you must use the following font-family declaration:

svg text {
   font-family: 'Font Awesome 5 Free';
}

Why aren't fontawesome icons showing up in my svg?

Your SVG is an external file that is being imported as an <img>. It has no idea there is a FontAwesome CSS file being linked to by your HTML file.

In the general sense, you would need to include the FontAwesome CSS file from your SVG as well.

However it is not quite as simple as that because you are including the SVG as an <img>. Browsers have privacy constraints that disallow SVGs embedded as <img>s from referencing other external resources. They must be self-contained.

The solution you will need to use is to include a <style> element in your SVG and embed the FontAwesome TTF font as a Data URI.

<svg width="500" height="200" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 500 200">  
  <defs>
    <style type="text/css">
      @font-face {
        font-family: 'FontAwesome';
        src: url(data:font/opentype;base64,[...]) format('opentype');
      }
    </style>
    ...etc...

See: use FontAwesome icon in svg without external files

Add icon from FontAwesome to SVG text

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

How to render FontAwesome as SVG Image using Javascript?

You can't use an <img> element when referencing an external CSS stylesheet from XML. You need to use an <object> element like this answer recommends, and prepend an <?xml-stylesheet?> processing instruction in order for the SVG+XML blob to be able to find the FontAwesome glyph for the HTML entity .

function addSVG() {

  var ele = document.getElementById("svg");

  var svg = `

    <?xml-stylesheet type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"?>

    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">

        <text x="4" y="15" style="font-family: FontAwesome" fill="red"></text>

    </svg>`

  var output = `data:image/svg+xml;utf8,${svg}`

  ele.type = 'image/svg+xml';

  ele.data = output;

}

addSVG()

<head>

  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">

</head>

<body>

  What it should look like:

  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">

    <text x="4" y="15" style="font-family: FontAwesome" fill="red"></text>

  </svg> What it looks like:

  <object id="svg"></object>

</body>

---

Related Topics