Use icon fonts in xpages

Question

I want to use icon (awesome) fonts in my xpage. I downloaded it and put them into my webContent folder (as all my additional stuff. e.g. bootstrap). I modified the awesome.css as followed.

@font-face {
  font-family: "FontAwesome";
  src: url('/font/fontawesome-webfont.eot');
  src: url('/font/fontawesome-webfont.eot?#iefix') format('eot');
  src: url('/font/fontawesome-webfont.woff') format('woff');
  src: url('/font/fontawesome-webfont.ttf') format('truetype');
  src: url('/font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

And put an into my page.

<i class="icon-refresh"></i>

The result is. I see a placeholder for that icon-font in my page and two error messages in firebug.

"NetworkError: 404 Not Found - http: // localhost/home.nsf/xsp/.ibmmodres/font/fontawesome-webfont.woff" "NetworkError: 404 Not Found - http: // localhost/home.nsf/xsp/.ibmmodres/font/fontawesome-webfont.ttf"

So loading the fonts doesn't work (the files are in that folder font and my other css and js files I am using, are loaded with the same method). I use bootstrap and deactivated the icons for the download (but I had the same problem with the glyphs there).

So maybe someone have an idea.

Answer 1

remove the first slash, that should do it.

Plan B: move the fonts into the resource directory (if you use the Java perspective you can create your font directory)

Answer 2

I found it to be a problem with my server (in this case the localhost) not having the .woff registered as a mime-type of application/octet-stream. Once I registered it, I no longer had the 404 not found error.