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

    How to load resource files with require.js

    Ralf Becher

      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

        • 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);
             $("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')