Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Erroneous Icon Font URL #4174

Closed
srissel opened this issue Jun 27, 2016 · 18 comments
Closed

Erroneous Icon Font URL #4174

srissel opened this issue Jun 27, 2016 · 18 comments

Comments

@srissel
Copy link

srissel commented Jun 27, 2016

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
Copy link
Author

srissel commented Jun 27, 2016

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
Copy link

mattr commented Jun 30, 2016

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 jlukic added this to the 2.2.2 milestone Jun 30, 2016
@jlukic
Copy link
Member

jlukic commented Jun 30, 2016

./ 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
Copy link

MarKayS commented Jun 30, 2016

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
Copy link
Member

jlukic commented Jul 1, 2016

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
Copy link

mattr commented Jul 1, 2016

@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
Copy link

RWizard commented Jul 2, 2016

Problem in OSX too. After update to 2.2.1.

@franciscolourenco
Copy link

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 added a commit that referenced this issue Jul 8, 2016
@jlukic
Copy link
Member

jlukic commented Jul 8, 2016

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

@chris-griffin
Copy link

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
Copy link
Author

srissel commented Jul 12, 2016

Works for me.
Many thanks, @jlukic !

@FranciscoKnebel
Copy link

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

ali1k added a commit to slidewiki/custom-semantic-ui that referenced this issue Aug 19, 2016
* 'master' of https://github.com/Semantic-Org/Semantic-UI:
  Semantic-Org#4174, remove path.sep from paths
  Build 2.2.2
  Finish release notes, fix dimmer
  Fix cursor on search dropdown
  Update README.md
  Add forum note
@jlukic
Copy link
Member

jlukic commented Aug 22, 2016

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

@ruifortes
Copy link

ruifortes commented Sep 30, 2016

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
Copy link

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

@arichiardi
Copy link

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
Copy link

grinich commented Oct 22, 2018

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

@tom-wagner
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests