DEV: 404 error on glyphicons-halflings-regular.woff

[Jakobovski]

After grunt build the CSS file tries to find glyphicons-halflings-regular.woff in fonts/ instead of in bower_components/. I am therefore getting a 404 error GET http://localhost:9001/fonts/glyphicons-halflings-regular.woff 404 (Not Found)

See similar issue: See https://github.com/yeoman/generator-angular/issues/665

[cgross]

The generator uses Font Awesome by default. Did you undo that?

You'll need to make sure the glyphicons font is copied over. You'll likely also need to change the bootstrap LESS var for the icon path. By default I think that path is ../fonts which is causing your problem. You just need to make sure the relative location of the fonts to the css file is the same as the relative pathing is in development.

[Jakobovski]

I did not change the default font from Font Awesome. They only thing that is not default in my build is the use of ui-router.

Your suggested fix solved my issue, thanks! It would still be nice to get this to work out of the box.

[cgross]

Out of the box it uses Font Awesome. Font Awesome is a replacement for glyphicons in bootstrap. If you've using glyphicons instead of Font Awesome icons you'll get an error like this (but you'll see it regardless of the dist build or just running from the development files).

[Jakobovski]

Alright... Can I add that bootstrap glyphicons are not supported to the README?

[mkhanal]

So what is the recommended fix for this. Not to use font-icons with angular bootstrap or not to use glyphicons ?

[ashukur]

Anyone have a fix for this? After build, our project is still looking for the bootstrap-sass glyphicons to root/bower_components instead of the dist folder.

[cgross]

bootstrap-sass? Thats not part of this generator (yet). If you have some stylesheet thats referencing a font, you need to ensure that the font file is copied to /dist during the build and that the relative location of that font to the css file is the same as it was in the original dev environment.

[eranimo]

You should be using bootstrap-sass-official, which is the official sass port of Bootstrap.

[bolora]

I've had to add this my Gruntfile.js to get rid of this error:

grunt.initConfig > copy > main > files >

{src: ['bower_components/bootstrap/fonts/**'], dest: 'dist/',filter:'isFile',expand:true}

Should not have to do this out of the box.

[bolora]

I just realized that we always use our custom TWBS so we change the icons back to glyphicons. So technically, out of the box this error does not occur.

So you can reject this PR but I agree with Jakobovski, there should be something added to the README that states that is you use native TWBS then you have to make the addition to the Gruntfile.

Personally, although I think FontAwesome is indeed awesome, hacking Twitter Bootstrap out of the box is an unfortunate decision.

[bolora]

Chris, can you close this issue since you merged my PR in 5b4a9c894 ?

[LegalizeAdulthood]

Is it mentioned anywhere in the README or anywhere else that the purpose of font awesome is to replace the glyphicons font?

When we initially generated our project, we saw the reference to font awesome, but we removed it because I didn't understand why it was there.

[ghost]

I still get the 404 error if I implement some of the angular-bootstrap components (like a datepicker). I have {src: ['bower_components/bootstrap/fonts/**'], dest: 'dist/',filter:'isFile',expand:true} in my gruntfile. Can anyone confirm this is still happening if u implement such a component?

[DuLerWeil]

@kennethvdberghe same problem while working with datepicker

[StanislavPrusac]

@kennethvdberghe yes, it still happening.

[ukalpa]

If your web server is IIS try this method: Go in to the IIS console, click MIME Types icon and add .woff as application/octet-stream – problem solved!

[Ali-Usmaan]

you need to register Mime types for .woff files. in IIS server see this http://projectseven.com/tutorials/servers/iis-woff/index.htm