3 Replies Latest reply: Nov 26, 2014 3:36 PM by Ralf Becher RSS

    How to load resource files with require.js

    Ralf Becher



      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

        • Re: How to load resource files with require.js
          Stefan Walther

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

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