logo

Updating Glyphicons in Bootstrap

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:

image

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:

 

GLYPHICONS Halflings

 

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!

Comments

  1. Even better, use icon fonts. Unlike image sprites which look fuzzy on retina displays, icon fonts look smooth and sharp on retina display devices and can be made any size. Here's a icon font set made for bootstrap. It even includes a paper clip.

    http://fortawesome.github.com/Font-Awesome/

    I hope I don't sound like an advertisement, but I'm really excited about the possibilities of icon fonts. I'm not associated in any way with the group that created font awesome.

      • avatar
      • Jake Howlett
      • Fri 22 Mar 2013 03:06 AM

      Hi Tanny,

      I agree entirely. I love font icons. All the social/sharing icons to the top-right of this page are font-based.

      What I was trying to do though was not add any extra weight to the version of Bootstrap I was using. I'm already weeks in to the build and have used countless sprite-based <i class="icon"> icons in the design. I wanted to keep using the same convention, rather than end up with two different ways of doing things.

      As I understand the upcoming Bootstrap v3 using font icons ;-)

      Jake

      Hide the rest of this thread

      1. Hi Jake,

        That's the beauty of font awesome. You don't change how you work in Bootstrap. Font Awesome is designed to replace the sprites without having to change how you use bootstrap. You continue to use icon-... classes just like you do with the sprites, but now they're font icons.

        Tanny

          • avatar
          • Ferdy
          • Sun 24 Mar 2013 05:40 PM

          +1 for FontAwesome, using it heavily these days.

      • avatar
      • Jake Howlett
      • Thu 28 Mar 2013 08:10 AM

      I tried them and they're too good not to use!

      I ended up using a subset of them to keep weight down even further. Using this tool http://www.icnfnt.com/#/

      Show the rest of this thread

  2. The paperclip: It's skeuomorphism from the time of real letters and snailmail.

    You write a letter, and have any number of additional documents supporting the letter. The end of the letter mentions these attachments, and you attach these documents... with a a paperclip.

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Thu 21 Mar 2013

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content