Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

glyphicons-halflings 404 #24

Closed
dbrans opened this Issue · 8 comments

8 participants

@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
Collaborator

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";
@kevva kevva closed this
@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
Collaborator

@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.

@kevva kevva referenced this issue from a commit
@kevva kevva Include Glyphicons
Fixes #24.
8219731
@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...

@iokill iokill referenced this issue from a commit in sigma-star/generator-webapp
David Gstir Sync bootstrap glyphicons from bower_components folder on every build…
…. (Improvement to fix #24)

If there is any change to the glyphicons files we would have to update them manually. This fix allows a user to simply update the bootstrap package via bower and everything else just works. This could also be used for syncing various other static files like the fonts of font-awesome.

Signed-off-by: David Gstir <david@sigma-star.at>
1cb3ba0
@TimvdEijnden TimvdEijnden referenced this issue from a commit in TimvdEijnden/generator-webapp_requirejs
@kevva kevva Include Glyphicons
Fixes #24.
b0eac0f
@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...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.