“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.

3 thoughts on ““runtime optimized resources” in conjunction with font-awesome

    • Patrick Kwinten 2015-October-6 / 9:20 pm

      Hello Brian,

      thank you for responding. The link gives quiet a detailed description of the problem. Will try to implement the suggested solution 2morrow =)

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