Using icon: Failed to decode downloaded font

[sungwoncho]

When I include an icon in my html, I get a square instead and an error in the console.

<i class="github icon"></i>

gives me:

Failed to decode downloaded font: http://localhost:3000/lib/semantic-ui/src/themes/default/assets/fonts/icons.woff2
Failed to decode downloaded font: http://localhost:3000/lib/semantic-ui/src/themes/default/assets/fonts/icons.woff
Failed to decode downloaded font: http://localhost:3000/lib/semantic-ui/src/themes/default/assets/fonts/icons.ttf

I looked in themes/ but there is no assets/ directory. Any suggestions?

[sungwoncho]

I dug a little deeper. This is happening because I am using this package inside another package. The correct path should be http://localhost:3000/packages/myPackageName/lib/semantic-ui/src/themes/default/assets/fonts/icons.woff2 and so on.

Willing to work on PR for this. How should I proceed?

[flemay]

Thanks! :D I should be creating soon a dev branch so you can make a pull request to that branch :)

[sungwoncho]

It seems that the issue can be fixed by overriding @fontPath in site.variables to a desired value.

How can I override it? I tried modifying the value directly and adding a value to site.overrides but neither worked.

[zachariahtimothy]

I am having the same problem as @sungwoncho . Fonts do not load and site variables cannot be overriden. What is the right way to use this library in a package? I am building a platform out of Meteor packages and would like theming to be a part of that. Please advise. Thanks!

[zachariahtimothy]

@sungwoncho I just found a workaround to this issue. Turn icons off in custom.semantic.json then add semantic:ui-icon to api.use in your package. Semantic UI icons work after that.

[sungwoncho]

@zachariahtimothy I overrode @fontpath in site.variables.import.less to the correct path inside the package.

However, the file was missing I had to try many ways to generate that file, though. This package is somewhat buggy when used inside a package. See this Stack Overflow question for more info.

[cleophasmashiri]

If you are using express you need to allow serving of static content by adding something like:

var server = express();
server.use(express.static('./public'));  // where public is the app root folder, with the fonts contained 

therein, at any level, i.e. public/fonts or public/dist/fonts... // If you are using connect, google for a similar configuration.

[krishaamer]

Having the same problem. What's the best way to fix?

[Maxhodges]

I got that error too and as strange as it sounds, all we did was reloaded the font files and add them to the project again. It's like a couple files got corrupt or something, and replacing them from solved it.

[avixter]

Hi, just wanted to add in my 2 cents here.

I had the same issue in Meteor ver. 2.1.4. Add the following package from Atmosphere fixed the issue. meteor add semantic:ui-icon

Hope this helps

[msgfxeg]

Hi, in Jan 2020 the problem still existing I am using react-semantic-ui both alone and inside Meteor. and I still can not fix it! Please help EDIT: At last solved after 5 days of researching by creating a public folder on the meteor project root and copying the whole themes folder from the semantic-ui-css there!

[evg1n]

Checklist for Meteor + React // install packages

• [ ] $ meteor npm install semantic-ui-react
• [ ] $ meteor npm install semantic-ui-css
• [ ] meteor add semantic:ui-icon meteor-app/client/main.js must include (client entry file)
• [ ] import 'semantic-ui-css/semantic.min.css' Hope this helps

[msgfxeg]

@evg1n Thanks for your help will try the last 2 steps soon and see.

[evg1n]

@evg1n Thanks for your help will try the last 2 steps soon and see.

@msgfxeg have you tried the solution? For a sub-set of icons, I still get squares instead.

Cheers.

[msgfxeg]

@evg1n sorry for being so late. I have just tried your solution and I am also getting squares instead. I will drop using react-semantic-ui for my project because of that.

Kind Regards.

[msgfxeg]

@evg1n need to ask you a question related to a problem I am facing with meteor initial loading it takes about 11 seconds to load then it is very fast after during my interaction with the application. Is this initial slow loading by any means related to react-semantic-ui or is it something else? Do you have any suggestion to solve this problem as it is very bad and google speed test is telling me that the application takes 10.5 seconds to load!

Thanks in advance