Create Custom Icons for Twitter Bootstrap Easily

Twitter bootstrap is one of the most effective frameworks available online at the moment to speed up frontend web development process. We have covered it in our previous post before, we reckon it’s the ultimate frontend framework which covers almost all UI. It has base CSS, grid layout, responsive layout, general base styling for all HTML elements such as buttons, form, table, a good collection of UI components and a dozen of javascript plugins.

Also, there are quite a few extensions such as extra javascript plugins, themes, skin, generators available online for Twitter bootstrap, for more useful tools that extend the capability, you can read from this post – 18 Useful Twitter Boostrap Goodies You Should Know.

Currently, this bootstrap is using icons provided by Glyphicons, it’s minimal and simple icons. However, it isn’t attractive enough, and some icons  are missing, so in this tutorial, we are going to show you how to make your own Twitter bootstrap icon sets. Our main ingredients:

• FamFamFam Silk Icon set
• Online CSS Sprite Generator

Step 1: Get the icons

We downloaded FamFamFam Silk Icon set, and it has total of 1000 icons for free! They are all well-designed, colourful and looks really nice! However, due to the CSS Sprite generator we using, it’s restricted to 1mb upload file size. As a result, we have to remove around 300 icons that we possibly won’t need them in web projects, and to reduce the size of our CSS sprite.

Step 2: Create the Sprite

After we have cleaned up and removed unnecessary icons, we need to zip it up and upload it to Fondue’s Online CSS Sprite Generator. We have been searching around for a good online generator, this is the one provides many configurations.

Settings

We will stick with some of the default setting except the following:

• Build Direction: Horizontal
• Horizontal Offset: 5px
• Vertical Offset: 5px
• CSS Prefix: cus-

Once you clicked submit, probably will take around 30 seconds (depend on your Internet speed), you should able to download the CSS Sprite and CSS code. The CSS Sprite should look something like this:

And the CSS code looks something like this:

......
cus-world{ background-position: 0 0; width: 16px; height: 16px; } 
cus-world_add{ background-position: 0 -21px; width: 16px; height: 16px; } 
cus-world_delete{ background-position: 0 -42px; width: 16px; height: 16px; } 
cus-world_edit{ background-position: 0 -63px; width: 16px; height: 16px; } 
cus-world_go{ background-position: 0 -84px; width: 16px; height: 16px; } 
cus-world_link{ background-position: 0 -105px; width: 16px; height: 16px; } 
cus-wrench{ background-position: 0 -126px; width: 16px; height: 16px; } 
cus-wrench_orange{ background-position: 0 -147px; width: 16px; height: 16px; } 
......

Save the CSS Sprite as famfamfam-icons.png and CSS code as cus-icons.css

Step 3: Integrate it with Twitter Bootstrap

Integration is pretty easy, by default, we are using icon-xxx to put an icon with Twitter bootstrap, now, we will be calling our custom icons via cus-xxx. Open your cus-icons.css and put in this bit of code. We copied it from Twitter Boostrap css file and we changed icon- to cus- in the CSS code.

/* icons */
[class^="cus-"],
[class*=" cus-"] {
  display: inline-block;
  width: 17px;
  height: 16px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("icons/famfamfam-icons.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}
[class^="cus-"]:last-child,
[class*=" cus-"]:last-child {
  *margin-left: 0;
}

/* icons code below */
.cus-accept{ background-position: 0 0;  } 
.cus-add{ background-position: -21px 0;  } 
.cus-anchor{ background-position: -42px 0;  } 
.cus-application{ background-position: -63px 0;  } 
......
......
......

Done!

And, that’s it! You have just created your own custom icons for Twitter bootstrap, for the usage you can visit our demo page. A few things you need to take into considerations when you choosing the right icons:

1. Make sure the icon’s dimension is about 16px x 16px or smaller. Twitter bootstrap comes with different size of buttons and FamFamFam’s 16px looks a little bit off in mini button.
2. If you have a huge collection of icons, make sure you posterize it, we did it for this icon set to reduce almost half of its original CSS sprite file size. Visit this post to reduce your PNG file – Most effective method to reduce and optimize PNG images
3. You need more icons? We got it in our PSD repository! Visit favbulous great collection of icon sets