Using Bootstrap, whenever I want to an icon to an element, I simply write HTML like this:

<a class="btn" href="foo"><i class="icon icon-plus"></i> Add New</a>

And I get something like this:

The choice of icons is documented here and the icons themselves are based on Glyphicons "halflings".

All is good.

However, recently I found myself wanting to use an icon to show that a document had some attachments. Naturally, I wanted a paperclip. Just like a magnifying glass denotes searching, a paperclip denotes a file attachment. Who knows why!

To my surprise the available set of icons listed on the Bootstrap site didn't include a paperclip. Really? But on further investigation it became apparent that the current version of Glyphicons did include a paperclip!

Here are the icons currently supplied with Bootstrap. It's a single flat image, which is used as a CSS Sprite:

And here's the image which represents the current release of Glypicons:

Notice the difference?

There are a few very slight differences. But the main difference is that the latter image has an extra row of icons. Not only that but one of them is a paperclip! Get in!!

Luckily (for me) the makers of Glypicons add new icons to the end of the grid, without changing the positions of the existing icons. This meant I could simply replace the image currently used by my copy of Bootstrap with the latest Glyphicons release. Without breaking the existing CSS/icons!

Once the new image was in place all I had to do was work out the grid size used, which, it turns out is 24 by 24 pixels. Before long I'd extended the available Bootstraps icons by adding the following CSS:

.icon-attachment {
  background-position: -24px -168px;
}

Job done. I love Bootstrap!