How do you use a custom font path for the icons?

[mathvav]

I have my own, custom Gulp build system that I'm trying to use with this repo. It's working great, except for one thing; I can't seem to change the path that the exported CSS looks for the icon sets on the server.

I tried putting @fontPath: "fonts"; in my site.variables file, but that didn't change anything.

Is there anyway to change this?

[originalwebgurl]

Did you ever get this figured out? I had assumed that making this change would be global (because it's in the globals folder) but I was only able to override the path by setting it in the component file that uses it.

This is what worked for me:

site/globals/site.variables AND site/elements/icon.variables

@fontPath: "my/custom/path";

[jlukic]

Modifying @fontPath in global.variables should work. I'm a bit confused if it isnt for some users.

[leonardo015]

here the @fontPath variable (which in themes/default/globals/site.variables have this value: '../../themes/default/assets/fonts') gets compiled to './.../../themes/default/assets/fonts' and i can't figure out why. I'm using webpack with style-loader, css-loader and file-loader loaders.

[designosis]

@jlukic There is no file called global.variables.

Decrypting which files to edit for what customization in Semantic UI is pretty brutal. All my fonts are in the webroot @ /css/fonts/ ... I've added @fontPath : "fonts/icons"; to the following, but nothing changed:

`/semantic/src/site/globals/site.variables`
`/semantic/src/site/elements/icon.variables`
`/semantic/src/themes/default/globals/site.variables`

I've spent an hour searching, replacing, re-"gulp build"ing, and nothing has worked, aside from re-declaring the entire @font-face in my own CSS.

What am I missing?

[arichiardi]

My data point:

I got it working by modifying site/globals/site.variables with the following:

/*******************************
     User Global Variables
*******************************/

@fontPath: "css/themes/default/assets/fonts";

[JakobJingleheimer]

Note that if you also want to set component-level variables, the .variables file(s) also go under site and will be picked up automatically. Ex site/elements/segment.variables

@border: none;