Semantic-ui: Erroneous Icon Font URL

[srissel]

Hi,

we just upgraded to the latest Semantic UI release.
Thanks for this long-awaited release! :-)

Currently we are experiencing an issue with the URL to the icon font being generated.
In semantic.css and icon.css, icon font-face declaration gets compiled to this bit:

@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');
  ...
}

As you can see, the URL to the icon font is starting with ".../themes/...", it should just be "themes/...".
This still worked fine in version 2.1.18 of Semantic UI, our local paths haven't changed since that.

The respective part in icon.variables is:

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

An @fontPath is defined in site.variables as follows:
@fontPath : '../../themes/default/assets/fonts';

Paths in semantic.json are set as follow:

  "base": "./",
  "paths": {
    "source": {
      "config": "src/theme.config",
      "definitions": "src/definitions/",
      "site": "src/site/",
      "themes": "src/themes/"
    },
    "output": {
      "packaged": "dist/",
      "uncompressed": "dist/components/",
      "compressed": "dist/components/",
      "themes": "dist/themes/"
    },
    "clean": "dist/"
  }

We are working on Windows 10 environments, running NPM 3.10.2

Could you please help us solve this issue?

[srissel]

I was just able to solve this issue by changing
_@fontPath_ from
@fontPath : '../../themes/default/assets/fonts';
to
@fontPath : 'themes/default/assets/fonts';
Has there maybe been a change in how the urls are assembled?

[mattr]

Hit the same problem after upgrading from 2.1.8 to 2.2 (icons no longer appear).

Could be this commit to fix the relative path is the problem.

In tasks/config/project/config.js the addition of path.sep to the build path.

Windows is using \ as the path.sep value instead of /, which breaks the URLs on Windows builds, and the replace(/\\/, '/') function is not being called on this part of the path.

Environment:

• Windows 7
• npm 2.14.4

[jlukic]

./ were added to css paths to allow webpack to resolve import statements correctly.

./ should resolve to the current directory, the default theme still uses the old path syntax so I'm not sure what's going on. I'll try testing with custom themes and asset paths and see what I can find.

[MarKayS]

Also encountered this problem. I didn't change almost anything in site.variables or overrides.

After building and uploading to remote the chrome console showed the path as:
my_site/dist/.themes/default/assets/fonts/icons.woff2 Failed to load resource: the server responded with a status of 404 (Not Found)
Where obviously folder .themes does not exist.

srissel's solution fixed the path problem for me and the dot in URL was removed.

I am on Windows 10, [email protected]

[jlukic]

Its curious the path for you is showing up as dist.themes/ and not dist/./themes which should be functional. Perhaps an issue with path.sep

[mattr]

@jlukic I think it's the combination Windows using \ as the path.sep value and doubling as the escape character, so the . added to the build path ends up being escaped by the path separator (based on my quick dig through the source).

[RWizard]

Problem in OSX too. After update to 2.2.1.

[franciscolourenco]

Same problem when using webpack less-loader (OSX)

ERROR in ./~/css-loader!./~/less-loader!./src/semantic/src/semantic.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./themes/themes/default/assets/fonts/icons.eot in ...src/semantic/src
 @ ./~/css-loader!./~/less-loader!./src/semantic/src/semantic.less 6:284589-284646 6:284669-284726

ERROR in ./~/css-loader!./~/less-loader!./src/semantic/src/semantic.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./themes/themes/default/assets/fonts/icons.woff2 in ...src/semantic/src
 @ ./~/css-loader!./~/less-loader!./src/semantic/src/semantic.less 6:284776-284835

ERROR in ./~/css-loader!./~/less-loader!./src/semantic/src/semantic.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./themes/themes/default/assets/fonts/icons.woff in ...src/semantic/src
 @ ./~/css-loader!./~/less-loader!./src/semantic/src/semantic.less 6:284866-284924

ERROR in ./~/css-loader!./~/less-loader!./src/semantic/src/semantic.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./themes/themes/default/assets/fonts/icons.ttf in ...src/semantic/src
 @ ./~/css-loader!./~/less-loader!./src/semantic/src/semantic.less 6:284954-285011

ERROR in ./~/css-loader!./~/less-loader!./src/semantic/src/semantic.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./themes/themes/default/assets/fonts/icons.svg in ...src/semantic/src
 @ ./~/css-loader!./~/less-loader!./src/semantic/src/semantic.less 6:285045-285102

[jlukic]

Can anyone verify if this fix works. You might want to also try fiddling with the path in the 961b4c9 if not.

[chris-griffin]

Commit 961b4c9 fixed this issue for me with Windows 7 / npm 2.15.8

Thanks very much for your contributions @jlukic. Really fantastic project/dedication!

[srissel]

Works for me.
Many thanks, @jlukic !

[FranciscoKnebel]

Building on Windows 10, NPM 3.10.5, same issue referenced above.
@jlukic change fixed the problem for me. Thanks for this.

[jlukic]

This issue appears to be fixed with last change so closing. Glad to hear :)

[ruifortes]

Still having this problem in Semantic-UI-LESS using windows 7.
Add to change
@fontPath : '../../themes/default/assets/fonts';
to
@fontPath : '../assets/fonts';

posted a issue on Semantic-UI-LESS also.

[kmehmety]

Just enter my-custom-semantic folder, run "gulp build"

[arichiardi]

Hello folks! Thanks for this fix, is there a way to propagate to semantic-ui-less for non-gulp users?

Sorry I am also not very proficient with less so I really need a helping ✋

[grinich]

Fixed for semantic-ui-less here: https://github.com/Semantic-Org/Semantic-UI-LESS/pull/51

[tom-wagner]

FWIW I had the same issue while using semanitc-ui-react and was able to fix it using srissel's solution from above