glyphicons-halflings 404

[dbrans]

Hi there,
I just ran a fresh yo webapp && npm install && bower install
I tried adding an icon to index.html and got a 404 for this url:
http://localhost:9000/img/glyphicons-halflings.png

I noticed that there are a couple of closed issues related to this.

[asgeo1]

Agree, this is still an issue - not sure why it was closed.

I've just started with yeoman, and this is not a good experience to have straight up. I'm still not sure what the solution is, even after having looked at the other threads.

[kevva]

It's because the Bootstrap lib references ../img/glyphicons-halflings.png. One solution is to manually move the images in app/components/sass-bootstrap/img to app/images and then paste this in your main.scss before the Bootstrap import.

$iconSpritePath: "../images/glyphicons-halflings.png";
$iconWhiteSpritePath: "../images/glyphicons-halflings-white.png";

[shanemaiolo]

It's similar to this, Yeoman forgets to bundle font-awesome and the sprite images for bootstrap yeoman/yeoman#419

While its not a huge stretch to manually copy resources, there seems to be a few people who would rather not.

[sindresorhus]

@shanemaiolo I agree, we should try to find a solution to that.

@kevva since it's very popular we should try to find a workaround. Either in code or as a fallback with docs. If you have any thoughts about how we can resolve this, can you add a comment in yeoman/yeoman#419

[kevva]

@shanemaiolo, FontAwesome isn't a part of jlong/sass-twitter-bootstrap, open an issue over there. We should be able to handle the sprites for you though.

@sindresorhus, the solution above works. To fix it we either need to bundle the sprites or trigger bower install automatically (#32) so we can copy over the images from components/sass-bootstrap.

[iokill]

Hi all!

AFAIK the fix by @kevva causes problems when there is a change to the glyphicons files of sass-bootstrap (e.g new icons added) and the user updates sass-bootstrap using bower. So it would be great to have a way of syncing the changes from app/bower_components/sass-bootstrap/img/ to app/images/.

How about using the copy task to sync such files on every grunt build, grunt server etc.? This would also make it easy to solve the path-issue with font-awesome. The only problem I see with this approach is that we would overwrite any user-modifications to such files. But we could always add a check for that if it's required...

[olizilla]

This is still a problem when Sass with Compass isn't included. We can't set the $icon-font-path as we only have the .css file.

After usemin has had it's way with it the font url in the bootstrap css are like 'url(../fonts/glyphicons-halflings-regular.ttf)' but the copy:dist task doesn't flatten the file path so the fonts are copied to /dist/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf.

So rather than setting the $icon-font-path for the Sass version, perhaps it would be better to copy the fonts to /dist/fonts in both cases. As a quick workaround I have included:

copy: {
...
      glyphicons: {
        files:[
          {
            expand:true,
            flatten:true,
            src: '<%= yeoman.app %>/bower_components/bootstrap/dist/fonts/*',
            dest: '<%= yeoman.dist %>/fonts/'
          }
        ]
      }
}

Happy to tidy up into a PR if the solution sounds reasonable.

[nikhilbangar]

To overcome this issue just copy paste fonts folder from bower_component/bootstrap/ to the dist/ directory.

Hope this would help...