FontAwesome not loading inside a WebView

Question

I'm using Popline in a Windows Store app but the only way I can get the icons to show is by linking to the bootstrap CDN version of the file. When I try and reference my local copies of the files, it doesn't work.

Here's my path to fontAwesome.css

<link rel="stylesheet" type="text/css" href="ms-appx-web:///Assets/HTML/css/font-awesome.css">

I know this is correct, because if I edit that file and add

* { border: 1px solid red; } 

To the top, everything in my document gets a red border. The issue seems to be with the font files themselves. All are imported into the project and Content is set to "Copy if Newer"

I've tried editing fontAwesome.css so that the font file paths are preceded by ms-appx-web:///Assets/HTML/. When that didn't work I tried taking that block out and putting it directly in my document, like so:

<style type="text/css" media="screen">
    @font-face {
      font-family: 'FontAwesome';
      src: url('ms-appx-web:///Assets/HTML/fonts/fontawesome-webfont.eot?v=4.2.0');
      src: url('ms-appx-web:///Assets/HTML/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('ms-appx-web:///Assets/HTML/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('ms-appx-web:///Assets/HTML/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('ms-appx-web:///Assets/HTML/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
      font-weight: normal;
      font-style: normal;
    }
</style>

Can anyone see what I'm doing wrong?

update

Please note I am using NavigateToString to load my html. This is absolutely necessary and there's no way around it, so the solution must work for NavigateToString

Answer 1

After a lot of trial and error I finally found how to do this. There are several solutions out there which work if you're using the Source property to put HTML in the WebView, but none of these work if you're using NavigateToString

This one, from Matt Small's blog, does.

@font-face {
    font-family: 'FontAwesome';
    src: url(data:application/x-font-woff;charset=utf-8;base64,<BASE64 STRING OF fontawesome-webfont.woff>) format('woff'), 
        url('ms-appx-web:///fontawesome-webfont.ttf?v=4.2.0') format('truetype');
    font-weight: normal;
    font-style: normal;
}

You'll need to put this code into the head of your HTML file. This will not work if in a separate css file.

You can use this page to convert your fontawesome-webfont.woff file. If that link doesn't work there are lots of other pages out there that do the same.