DevTip: using the latest font-awesome CSS toolkit in your XPages application

Patrick Kwinten

Tired off or you feel restricted by the Bootstrap Glyphicons? I bet you do. So you fancy to use Font-awesome as addition? Excellent choice. But after you have added them to your web-content folder and place them on an XPage you will notice the desired font does not appear.

Luckily for you other people have bumped into this before and allocated the problem and come with a fix.

So now you started to load the libraries your XPage application is depending on into ODP/NSF by using Bower or another package manager. If you do not specify a specific version but go for “latest” you will notice that in the suggested fix a version is specified for the font, so which each new release (which you are not aware of due to the “latest” option) your fix is out of sync.

CDN to the resque you might think. Since they handle the URL complication you are good to go as a consumer. Try to add a style sheet resource to an XPage without the http/https protocol is not allowed. If you modified it by hand in the source code like:

href=”//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css”

in the browser something as

link rel=”stylesheet” type=”text/css” href=”/apps/customerx/fontawesomecdn.nsf//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css”

will be produced which won’t work. You can add the protocol only once and you can not make the protocol conditional here.

Themes to the rescue! In a Theme design element you can check against what scheme the application runs and if so go for the corresponding protocol:

<theme>
<!– FontAwesome –>
<resource rendered=”#{javascript:context.getUrl().getScheme().equals(‘http’)}”>
<content-type>text/css</content-type>
<href>http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css</href&gt;
</resource>
<resource rendered=”#{javascript:context.getUrl().getScheme().equals(‘https’)}”>
<content-type>text/css</content-type>
<href>https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css</href&gt;
</resource>
</theme>

Here I have choosen to go against maxcdn which provides a “latest” option. If I check in the browser if delivers me

/*!
* Font Awesome 4.6.3 by @davegandy – http://fontawesome.io – @fontawesome
* License – http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/

Summary: problem solved.

  • I have the latest version of font-awesome
  • I have not an URL problem
  • I respect the protocol my application runs under

Unfortunately, my library is gone from my package manager file.

If you have a better suggestion then please drop a comment here below.

Update – Use Grunt

After writing this post I thought that their might be customers who block CDN resources. What to do then?

In Brad Ballasaitis example he created an additional CSS to overwrite the default font-family specification, one without the URL ?v= parameter.

In case you use a tool like Bower to download and install 3rd party libraries or plugins the original CSS with the URL ?=v parameter will be installed. You could write a simple Grunt task (I am new to this) that picks up your custom font-family CSS file from a temporary (fixes?) directory and copy it into the font-awesome CSS directory. A simple example would be:

/*
Copy font-awesome fix
Author Patrick Kwinten
All rights reserved
*/
‘use strict’;

module.exports = function (grunt) {

    require(‘load-grunt-tasks’)(grunt);
grunt.initConfig({
copy: {
main: {
src: ‘fixes/font-awesome-fontFamily.css’,
dest: ‘WebContent/libs/font-awesome/css/font-awesome-fontFamily.css’,
options: {
process: function (content, srcpath) {
return content;
},
},
},
}
});
};

If you run this task you are back to a state where you can now overwrite the default font-family selector again.

Load the CSS files via a Theme design element e.g.:

<!–
Not the following is not working in conjuction with the
XSP Property ‘runtime optimized resources’.

Therefor the following workaround is applied:
– Move the @font-face part into 2 new CSS e.g.
./font-awesome/css/font-awesome-fontFamily.css
./font-awesome/css/font-awesome-fontFamily.min.css

Note the paths to the fonts differ in these files.

– Load 1 of the css via the Theme based upon the context.getProperty(‘xsp.resources.aggregate’) property
–>
<resource rendered=”#{javascript:context.getProperty(‘xsp.resources.aggregate’).equals(‘false’)}”>
<content-type>text/css</content-type>
<href>font-awesome/css/font-awesome-fontFamily.css</href>
</resource>
<resource rendered=”#{javascript:context.getProperty(‘xsp.resources.aggregate’).equals(‘true’)}”>
<content-type>text/css</content-type>
<href>font-awesome/css/font-awesome-fontFamily.min.css</href>
</resource>
<resource>
<content-type>text/css</content-type>
<href>font-awesome/css/font-awesome.min.css</href>
</resource>

Add 20 years of experience to your workforce

You can 20 years of experience within IBM Notes and Web development to your workforce by hiring me.

Interested? Read my curriculum vitae on LinkedIn: http://www.linkedin.com/in/patrickkwinten and get in contact.

I am happy to work WITH you !

Leave a comment