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.

Are you able to access the font file at the url localhost/home.nsf/xsp/.ibmmodres/font/fontawesome-webfont.woff? Could be xpages won't serve certain types of files (I'm not familiar with xpages) or that the relative path is wrong in your css. — joshb

stwissel stwissel · Accepted Answer · 2012-10-17T01:02:06

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)

Use icon fonts in xpages

2 Answers