Semantic-ui: Can't load icon font

Created on 28 Jul 2016 · 8Comments · Source: Semantic-Org/Semantic-UI

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.

Source

SpiritPixels

Most helpful comment

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

rlightner on 28 Jul 2016

😄1 👍1

All 8 comments

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?

SpiritPixels on 28 Jul 2016

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

rlightner on 28 Jul 2016

😄1 👍1

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

Dr-Dev on 1 Aug 2016

👍1

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?

rlightner on 1 Aug 2016

👍1

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?

SpiritPixels on 1 Aug 2016

@rlightner "Had to modify the template."

WHICH template?