In a couple of previous posts we've seen how to use bootstrap-sass-official in an ember-cli app. Not long after I published the second post, my friend Tute pointed out that my solution left the bootstrap glyphicons in a broken state. So, let's get those working!

Luckily this ia a pretty easy fix. We just need to add a few lines to Brocfile.js.

First we should remove this line :

module.exports = mergeTrees(app.toTree());

And replace it with these lines :

// Put the bootstrap fonts in the place that the bootstrap css expects to find them.
var pickFiles = require('broccoli-static-compiler');
var bootstrapFonts = pickFiles('vendor/bootstrap-sass-official/assets/fonts/bootstrap', {
    srcDir: '/',
    destDir: '/assets/bootstrap'
});

// Merge the bootstrapFonts with the ember app tree
var mergeTrees = require('broccoli-merge-trees');
module.exports = mergeTrees([app.toTree(),bootstrapFonts]);

That's it! This will place the font files that provide the glyphicons in the right place ('assets/bootstrap/') so that they can be used by the css files generated from bootstrap-sass-official.

I just added some glyphicons to watch.canary.io using this method and you're welcome to checkout the source code to see how it all fits together.

UPDATE : Joseph DeVenuta points out that the format of the bootstrap-sass-official package has changed.

At the time this post was originally written the first argument to pickFiles was vendor/bootstrap-sass-official/vendor/assets/fonts/bootstrap. It has been updated to vendor/bootstrap-sass-official/assets/fonts/bootstrap in order to match the new format of the package.