203 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
Latest 7 Posts
XPages Tip: Adding a Bootstrap Class to All Labels via the Theme (Redux)
Wed, Jul 20th 2016 5
XPages Tip: Overriding, Concatenating, and Conditionally Adding Control Properties via a Theme
Wed, Jul 20th 2016 8
XPages Tip: Displaying Bootstrap Applications Properly on Mobile Devices
Tue, May 31st 2016 4
Efficiently Keeping an XPages Session Alive with JSON RPC
Wed, May 25th 2016 5
Browser Session Lifespan – Idle Session Timeout vs LTPA Token Expiration
Tue, May 24th 2016 4
XPages Tip: Passing an Array to a Custom Control Property
Tue, Apr 12th 2016 4
XPages Tip: Beware Server-Side code in Multiple onClientLoad Events
Thu, Apr 7th 2016 4
Top 10
Dojo in XPages – 23: Using a Lightbox to Display Image Attachments
Thu, May 15th 2014 10
Set Focus on a Field when Showing a Bootstrap 3 Modal
Wed, Aug 6th 2014 10
Client-Side JavaScript Debugging Tip — Using XSP.dumpObject() and XSP.log()
Wed, Oct 1st 2014 10
Dojo in XPages – 8: Processing Each Element in a NodeList with forEach()
Thu, Feb 27th 2014 9
Implementing Font Awesome 4.0.3 in XPages
Mon, Apr 7th 2014 9
Adding Event Handlers to Font Awesome Icons in XPages
Wed, Apr 9th 2014 9
Computing Custom Date Format Patterns Throughout an Application
Mon, Aug 18th 2014 9
Gridx in XPages – 18: Formatting Date and Currency Columns
Thu, Dec 18th 2014 9
Order of execution for client-side JavaScript event handlers and callbacks
Mon, Jun 16th 2014 8
XPages Tip: Filtering a View Data Source with URL Parameters
Mon, Jul 7th 2014 8

Implementing Font Awesome 4.0.3 in XPages
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
Brad Balassaitis    

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


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.


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.

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

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):


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


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.


Apr 07, 2014
10 hits

Recent Blog Posts

Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition