Implementing Font Awesome 4.0.3 in XPages

Font Awesome is a great library of icons (implemented as a font) that you can use in your applications. Russ Maher wrote a great post and provided a sample application to make it very easy to get up and running with Font Awesome quickly. If you want to use version 3.2.1, stop reading this post and follow Russ’ instructions, because that’s the fastest way to go. However, Font Awesome is now up to version 4.0.3 and if you want to use that (or any future version), you can follow the process outlined here — including an XPages-specific gotcha.

Adding Font Awesome to Your Application

1) Download Font Awesome
http://fortawesome.github.io/Font-Awesome/

2) Extract the files somewhere on your hard drive

3) Add the files to your application

Open in Package Explorer or Navigator in DDE. Drag the font awesome folder from the file system into the WebContent folder in your application.

FontAwesome_WebContent

4) Include Font Awesome CSS

You need one of two stylesheets: font-awesome.css or font-awesome.min.css.

You can add them directly as a page resource (but you’ll have to type in a longer file path, since they’re not Style Sheet design elements — see Russ’ sample database for an example) or include them application-wide in a Theme.

<resources>
  <styleSheet href="font-awesome-4.0.3/css/font-awesome.css"></styleSheet>
</resources>

When going to production, use font-awesome.min.css instead of font-awesome.css.

If you’re using a version other than 4.0.3, update the file path accordingly to match the folder name under WebContent.

Common Error

To try it out, I added an icon tag to an XPage:

<i class="fa fa-users"></i>

In Firefox and Chrome, it doesn’t work by default. (Surprisingly, it does seem to work at this point in IE9+. There are special stylesheets to use font-awesome in IE8 and IE7, but that’s outside of the scope of this post.)

Here’s what it looks like in Chrome, along with the errors in the console (click the image to see it larger):

FontAwesome_Error_Chrome

Here’s what it looks like in Firefox, along with the errors in the console (click the image to see it larger):

FontAwesome_Error_Firefox

They’re both showing “Bad Request” errors. This has to do with URL parameters included for the font references in the Font Awesome stylesheets.

Fixing the Links

The ?v=4.0.3 appended to each font reference is what’s causing the problem. The server does not seem to like those parameters.

To allow it to work within XPages, open up the Font Awesome stylesheet (via Package Explorer or Navigator) and update the font links. You can find the lines to fix at the top of the stylesheets, in the @font-face { } rules.

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');

All you have to do is remove the ?v=4.0.3 from each url to fix the problem.

In the links that include anchor links (such as: ?#iefix&v=4.0.3), just remove the 4.0.3 part and you can leave the anchor link.

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot');
  src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');

(Make the change in both font-awesome.css and font-awesome.min.css.)

Now my sample page shows the “Users” icon.

FontAwesome_Icon

Advertisements

Tags:

18 responses to “Implementing Font Awesome 4.0.3 in XPages”

  1. Alan Hurt says :

    You could add a word of caution that setting up and using Font Awesome can become an issue if any user/company, etc that uses IE has decided that their security settings should be set to block font downloads. Oops, no icons.

    Yeah, it happens and it was tedious as hell to ‘fix’.

  2. Mark Leusink says :

    The version number is probably added to the URL’s to deal with upgrades: if you remove them, a new release of font-awesome comes out and the CSS file is updated, the browser might not reload the font files. Although I also think changes of this happening are very low…

    As an alternative you can also add ?open to alle the URL’s in the CSS file:

    src: url(‘../fonts/fontawesome-webfont.eot?open&v=4.0.3’);

  3. Prashant says :

    Hello Brad,

    I am trying to get this working, but I am getting an error GET http://ads.panoramtech.net/loader.js?client=wc het::ERR_BLOCKED_BY_CLIENT

    How can I fix this??

    Regards

  4. Csaba Kiss says :

    I am trying to insert awesome font icons in an accordion in a basicContainerNode in front of the label. How can I do that?

    • Csaba Kiss says :

      If I add styleclass=”fa fa-…”, then I get the icon, but it’s not inline with the text coming after the icon. Maybe, I need to add another class that forces the icon on the same line as the text

      • Brad Balassaitis says :

        I haven’t tried to do that. I would try including a span tag with the i tag for the icon next to the text within the span and see if that works. (I haven’t tested it, though.)

      • Brad Balassaitis says :

        I would also try looking at the source of the page (in Firebug or Chrome dev tools) and looking at the HTML tags that are sent out. You may be able to add your own CSS rules to line up the text and the icon.

  5. Patrick Kwinten says :

    just load the css file from a CDN and problem solved?

  6. travishiscock says :

    I fixed this without editing the font awesome CSS files. I used Redirection Rules in the Internet Site in the Domino Directory to replace ….?v=4.7.0 with ….?open&v=4.7.0

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: