Adding glyphicon doesn't show icon, instead 404 error in get request.

[afzalhussein]

How to reproduce

In order to produce this error, one should use bootstrap text base icon in your main template file by using this code:

<span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>

or Font Awesome text base icon code:

<i class="fa fa-windows"></i>

Inspect with the browser debugger or console and check for the font error.

http://localhost:9001/fonts/bootstrap/glyphicons-halflings-regular.woff2
Failed to load resource: the server responded with a status of 404 (Not Found)

http://localhost:9001/fonts/bootstrap/glyphicons-halflings-regular.woff
Failed to load resource: the server responded with a status of 404 (Not Found)

http://localhost:9001/fonts/bootstrap/glyphicons-halflings-regular.ttf
Failed to load resource: the server responded with a status of 404 (Not Found)

[afzalhussein]

If you're interested, I have chosen Grunt only in installation.

[NurRehman]

QuickFix for AwesomeFont is:

• Goto app/styles/main.scss
• Move $fa-font-path: and $icon-font-path: variable lines to the top after @import 'default'

If you haven't added other style dependencies then your main.scss should look like this

@import 'default';
$icon-font-path: '../bower_components/bootstrap/fonts/';
$fa-font-path: '../bower_components/font-awesome/fonts';
@import '../bower_components/font-awesome/scss/font-awesome';
@import '../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap';

• Restart your server (Grunt Serve)

Now test, you can actually see Font awesome icon, I would say, for now, we should go with font awesome, I can see they have an extensive library for icons and for other templates we can use regular bootstrap css.

Enjoy :smile:

[lofim]

@afzalhussein I've taken a look at the issue and it should be fixed now. Both for fa and bootstrap. I've also fixed some icon related file corruptions when creating the dist package in grunt workflow.

Would you guys mind testing this before we publish an updated version of the npm package?

Thanks

[afzalhussein]

Sure, will do.

Date: Tue, 15 Dec 2015 06:19:16 -0800 From: notifications@github.com To: generator-mario@noreply.github.com CC: afzalhussein@hotmail.com Subject: Re: [generator-mario] Adding glyphicon doesn't show icon, instead 404 error in get request. (#7)

@afzalhussein I've taken a look at the issue and it should be fixed now. Both for fa and bootstrap.

I've also fixed some icon related file corruptions when creating the dist package in grunt workflow.

Would you guys mind testing this before we publish an updated version of the npm package?

Thanks

— Reply to this email directly or view it on GitHub.

[afzalhussein]

It worked for envelope icon for bootstrap but not for print. fa fared even worse

[lofim]

I'm sorry but i am unable to reproduce this.

Can you describe the workflow you are using ? Does this issue arise with grunt serve, or is grunt serve:dist causing this ?

Also note that the generator package on npm has not been updated yet, so you'll need to clone the project and run npm link inside the project folder to use the latest version.

[afzalhussein]

K will check with link

[lofim]

Any progress here ?

I might close the issue and push a new version of the generator into npm. You can reopen the issue if the problem persist.