Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

MVP
MVP

How to load resource files with require.js

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

1 Solution

Accepted Solutions
Employee
Employee

Re: How to load resource files with require.js

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

3 Replies
Employee
Employee

Re: How to load resource files with require.js

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

Employee
Employee

Re: How to load resource files with require.js

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

MVP
MVP

Re: How to load resource files with require.js

Hi Stefan,

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

- Ralf

Community Browser