“runtime optimized resources” in conjunction with font-awesome

Last week I posted a question on the XPages forum (shameless plug) since I had some problems getting the ‘run-time optimized resources’ xsp property to work in conjunction with font-awesome.  During development I loaded the FA style-sheet via a theme. After staging and enabling the xsp property the icons failed loading.

In this post I will describe my way to have them work together.

My first attempt came after reading the following suggestion on Stack Overflow. This unfortunately did not work for me. Pulling the files via a theme kept on failing. It seems that the resource aggregation messes things up when CSS and JS is added through a theme.

Next I tried to load the new CSS file with only the @font-face part in it via the Resources on an XPage but this only worked with a complete URL, so including the HTTP protocol, which is not desired.

My third approach was by inserting an external style-sheet e.g.:

<head>
<link rel=”stylesheet” type=”text/css” href=”font-awesome-4.2.0/css/font-awesome-fontFamily.css”/>
</head>

This worked remarkably well.

As a result I have downsized the number of requests for Javascript from 63 to 10 and for CSS from 10 to 3.

If you suggest another solution please drop a line in the comments.