Upgrading bootstrap LESS files stored in a git repo

Since starting a project several months ago with bootstrap 3.2.0 I noticed that there’s a newer version. I’ve been editing the LESS files quite a bit and adding various bits of my own in and then recompiling into a single CSS file for the project. As this is all stored in a git repo it’s a bit difficult (and I wouldnt want all of the extra stuff and history) to just pull and update from the bootstrap repo. So, the easy way to upgrade:

cd bootstrap-repo
git pull
git diff v3.2.0..v3.3.1 less/ > ../less.patch
cd .. # (go to main project)
git apply --reject --directory=bootstrap/ less.patch

You’ll probably have a handful of rejects (check for *.rej files) – fix those as with any patch apply, recompile your LESS and you’re done plus you don’t have any of the bootstrap history left around.

Replacing glyphicons with font-awesome in bootstrap

So, I wanted to use the much wider range of icons available with Font Awesome compared to the glyphicons in bootstrap. As most of them are in this icon set and as I’m already compiling bootstrap straight from LESS, it didn’t seem worth it to keep the glyphicons in there. However because I’m using Angular Bootstrap they already had a number of glyphicon sections embedded in the templates that I didn’t want to have to remember to change whenever I updated.

Anyway, to replace them first you download the less for bootstrap and font awesome, then you open up bootstrap/less/bootstrap.less, comment out the

@import "glyphicons.less";
line and add the following import:

@import "../../font-awesome/less/font-awesome.less";

You then need to edit font-awesome/less/variables.less and change the @fa-css-prefix: to be glyphicon rather than fa. Recompile and just include the general output in your html, no need for fa to be included as well any more. Then you have a drop-in replacement with many more icons available. Anything you can do with font-awesome can also be done with bootstrap you just have to remember to use glyphicon* rather than fa* in any CSS. So far I’ve only noticed that glyphicon-log-out and glyphicon-floppy-disk classes need to be changed to their fa equivalents.