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

Question

I'm having a strange problem of icons (from fontawesome) not showing up in my svg. They have always shown up on my local computer, so for a long time I didn't realize that something was wrong for other people.

For example, take a look at the first svg image on this post: http://falconair.github.io/2015/01/05/financial-exchange.html

Where there are red and green "SELL" and BUY" words with prices and a bunch of boxes, there are actually supposed to be stick figures and other icons such as below:

One of the missing icons is this: http://fortawesome.github.io/Font-Awesome/icon/male/

In the css, I'm including fontawesome css. In svg, I'm using the relevant unicode character. In fact, the first image has a giant \uf183 because I was attempting to type out the unicode instead of pasting the character.

Any ideas on what I'm doing wrong here? I'm obviously not a web developer and I created the images to illustrate a point and now I'm having to spend more time fiddling with the image than the actual content.

Any chance you can post the HTML and CSS here? Hard to tell without it. Also, check the console to see if you have a 404 on the fontawesome.css. And lastly. It's \f183...not \uf183 ...as far as a I am concerned — LOTUSMS, Jan 07 '16 at 03:48

score 3 · Accepted Answer · edited May 23 '17 at 12:03

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

score 1 · Answer 2 · answered Jan 07 '16 at 03:49

1

Link font awesome online to your project and try...

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

answered Jan 07 '16 at 03:49

caldera.sac

4,918
7
37
69

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

2 Answers2