How to load resource files with require.js

[rbecher]

Hi,

I try to adopt a solution into an extension which uses font-awesome.css which loads font files from a sub-folder. Now I'm getting this error:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4848/fonts/fontawesome-webfont.woff?v=4.2.0

Do I have to place the resource files somewhere else or is there a way to load them or point the path to with require.js?

- Ralf

[Stefan_Walther · Accepted solution]

Hi Ralf,

I am doing it like this:

var faUrl = '/extensions/extensionName/lib/external/fontawesome/css/font-awesome.min.css';
wiUtils.addStyleLinkToHeader('wiFonts-fa', faUrl);

/**
 * Adds a style to the link header with the given id.
 * 
 * If the style with the given key is already part of the header, nothing
 * will happen. 
 * @param key of the 
 * @param link to the style sheet.
 */
addStyleLinkToHeader: function (key, link) {

  $(document).ready(function () {

   var idPattern = 'wiStyleLinked_' + key;
   if ($('#' + idPattern).length === 0) {
   var $lnk = $(document.createElement('link'));
   $lnk.attr('rel', 'stylesheet');
   $lnk.attr('href', link);
   $lnk.attr('id', idPattern);
   $("head").append($lnk);
   }
  });
},

And in the css file change the path relative to your css to point correctly to the font files:

url('../fonts/fontawesome-webfont.eot?v=4.0.3')

[Stefan_Walther]

You can certainly also use require.js but since the requirejs css plugin is not included it's a bit harder and you have to load the css with text! first then add it again to the header (as demonstrated in all the other examples where css is injected into the header).

[rbecher]

Hi Stefan,

thanks this works good. I would prefer this method over require.js text! loading for all css files..

- Ralf