404 errors for font files

[charlwillia6]

I still get the errors:

Instead of app.css I have app.less, and in ember-cli-build.js I have:

var app = new EmberApp(defaults, {
lessOptions: {
paths: [
'bower_components/semantic-ui'
]
},

    SemanticUI: {
        css: false,
        javascript: true,
        fonts: true
    }
});

And I have installed ember-cli-less through npm. I have a theme.config in the root, and app.less and theme.less in the styles folder in the app directory. Am I missing something? The font files are actually in dist/assets/css/themes/default/assets/fonts/ when the ember server is started.

Fonts do not appear. The themes and site folder is also in the styles directory. I cloned the example app here and I get the same errors I get in my project.

[danDanV1]

I think the issue is because this demo is using semantic-ember 0.9.3.

I have similiar bug with 404 of fonts assets, using semantic-ember 2.0 branch. Seems to be related to how the paths of the fonts are compiled from less.

Details here: Semantic-Org/Semantic-UI-Ember#162

I'd recommend an update of this demo to show proper implantation for the 2.0 branch.

[danDanV1]

Ah, I think the issue is with semantic less it's using grunt to do a relative path rewrite for the icon and image assets.
Semantic-Org/Semantic-UI-Ember#162 (comment)

How do we correct to get it to work with ember-cli-less? @nathanpalmer

[nathanpalmer]

@edeis53 I haven't revisited this project since I made the original demo and don't use ember-cli-less. Were you able to get it to work?

[danDanV1]

@nathanpalmer yes. it was a bit of a hack.
#1 - Define the theme path (default, otherwise) sources in ember-cli-build:

        css: 'bower_components/semantic-ui/dist',
        javascript: 'bower_components/semantic-ui/dist',
        images: 'bower_components/semantic-ui/dist/themes/default/assets/images', //DO NOT CHANGE THEME. Other themes do not have image assets (flags). Use the default theme here always.
        fonts: 'bower_components/semantic-ui/dist/themes/default/assets/fonts'
      },

#2 - Then you have to do a bunch of overrides to correct the paths. After you've loaded all the semantic less files.

eg.

/*
 *
 *
 *  Start BUGFIX For relative font paths
 */

  //icon fix uses lazy-loading, so we can easily adjust any variable below.
  @fontPath  : "./themes/@{themenameForIcons}/assets/fonts";

  /*-------------------
     Icon Variables
  --------------------*/

  @fontName: 'icons';
  @fallbackSRC: url("@{fontPath}/@{fontName}.eot");


  //conditinal statement on which font files to load depending on theme.
  //some of the themes have woff2 files missing.

  //declare else function#1
  .function (@param, @fontPath, @fontName) when not (@param = "default") {
    //themenameForIcons is not equal to default.
    @src:
      url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'),
      //url("@{fontPath}/@{fontName}.woff2") format('woff2'), //for example the material theme doesn't have a woff2 file, so we can exclude here.
      url("@{fontPath}/@{fontName}.woff") format('woff'),
      url("@{fontPath}/@{fontName}.ttf") format('truetype'),
      url("@{fontPath}/@{fontName}.svg#icons") format('svg')
    ;
  }

  //declare if conditional function#1
  .function (@param, @fontPath, @fontName) when (@param = "default") {
    //themenameForIcons is equal to default
    @src:
      url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'),
      url("@{fontPath}/@{fontName}.woff2") format('woff2'), //for example the material theme doesn't have a woff2 file, so we can exclude here.
      url("@{fontPath}/@{fontName}.woff") format('woff'),
      url("@{fontPath}/@{fontName}.ttf") format('truetype'),
      url("@{fontPath}/@{fontName}.svg#icons") format('svg')
    ;
  }

  //run the function
  .function (@themenameForIcons, @fontPath, @fontName);





 /*******************************
              Icon
 *******************************/

 @font-face {
   font-family: 'Icons';
   src: @fallbackSRC;
   src: @src;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-decoration: inherit;
   text-transform: none;
 }

[danDanV1]

Have to do a similiar thing with flags.

/*!
 * # Semantic UI - Flag
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */


/*******************************
            Theme
*******************************/

@type    : 'element';
@element : 'flag';

@import (multiple) '../../theme.config';




/*
 *
 *
 * Start Fix
 */

 @imagePath : './themes/default/assets/images'; //correct issue with images
 @formLoaderPath: "@{imagePath}/loader-large.gif";
 @spritePath: "@{imagePath}/flags.png";

/*
 *
 * End fix
 */









/*******************************
             Flag
*******************************/

i.flag:not(.icon) {
  display: inline-block;

  width: @width;
  height: @height;

  line-height: @height;
  vertical-align: @verticalAlign;
  margin: 0em @margin 0em 0em;

  text-decoration: inherit;

  speak: none;
  font-smoothing: antialiased;
  backface-visibility: hidden;
}

/* Sprite */
i.flag:not(.icon):before {
  display: inline-block;
  content: '';
  background: url(@spritePath) no-repeat -108px -1976px;
  width: @width;
  height: @height;
}

.loadUIOverrides();