Can't load icon font

[SpiritPixels]

Hi.

I just can't find solution for icon font not loading on pages. It is a local Windows install, everything updated to latest version through npm. Didn't do any customizations to theme files so far. It is a clean install.

I see that component icon.css is importing icons from url(".../themes/default/assets/fonts/icons.eot"); (There is " \ " after first dot, but Github doesn't outputs it). Where " \ " should be "/ ".

Tried for testing purposes to change that to url("./../themes/default/assets/fonts/icons.eot"); but it still doesn't load, in debuger I see error:
downloadable font: download failed (font-family: "Icons" style:normal weight:normal stretch:normal src index:3): bad URI or cross-site access not allowed source: file:///E:/GoogleDrive/PROJECTS/my-framework/semantic/dist/themes/default/assets/fonts/icons.ttf

If you could tell me am I doing something wrong and how to fix it, or is it a bug in Semantic.

[SpiritPixels]

Ok, I found the reason why url("./../themes/default/assets/fonts/icons.eot"); did not work. I transfered it to local server and it loaded icon font.

But when I run gulp build it makes url(".../themes/default/assets/fonts/icons.eot"); again. (There is " \ " after first dot, but Github doesn't outputs it)

How to overide that?

[rlightner]

I had this same issue. Had to modify the template.

@fontName: 'icons';
@fallbackSRC: url("/Content/@{fontPath}/@{fontName}.eot");
@src:
  url("/Content/@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'),
  url("/Content/@{fontPath}/@{fontName}.woff2") format('woff2'),
  url("/Content/@{fontPath}/@{fontName}.woff") format('woff'),
  url("/Content/@{fontPath}/@{fontName}.ttf") format('truetype'),
  url("/Content/@{fontPath}/@{fontName}.svg#icons") format('svg')
;

[Dr-Dev]

i just removed dots before "\themes" in semantic.css
it's working now
@font-face { font-family: 'Icons'; src: url("\themes/default/assets/fonts/icons.eot"); src: url("\themes/default/assets/fonts/icons.eot?#iefix") format('embedded-opentype'), url("\themes/default/assets/fonts/icons.woff2") format('woff2'), url("\themes/default/assets/fonts/icons.woff") format('woff'), url("\themes/default/assets/fonts/icons.ttf") format('truetype'), url("\themes/default/assets/fonts/icons.svg#icons") format('svg');

[rlightner]

Still an invalid url though, so not the best way to go. @jlukic I know you're busy, but is this a Windows thing? Looks like this might have something to do with #4174?

[SpiritPixels]

I have a partial fix. I am using Windows 7. It is the most stable environment for me still.

Added @fontPath: "./../themes/default/assets/fonts"; to semantic/src/site/elements/icon.variables and it fixed path in dist/components/icon.css

Added also @fontPath: "./themes/default/assets/fonts"; to semantic/src/site/global/site.variables but it did not fix the path in dist/semantic.css but outputs the same path as in dist/components/icon.css

Maybe @jlukic can help with that?

[designosis]

@rlightner "Had to modify the template."

WHICH template?

[awgv]

I know it’s been a while, but apparently it was fixed somewhere in-between.

[grinich]

Fixed for semantic-ui-less here: Semantic-Org/Semantic-UI-LESS#51