How to add custom icon in Twitter Bootstrap?

Question

I'm adding icon with Twitter Bootstrap without problem. They have a lot of alternatives.

http://twitter.github.com/bootstrap/base-css.html#icons

However, I couldn't find appropriate icon for one of menu item. It is about "car". What I want is I would like to add my custom icon. How can I do this?

Answer 1

Here's what we do, so that all the icons are in a single sprite file and you can allow arbitrary sized icons.

create a CSS file like

[class^="icon-custom-"],
[class*=" icon-custom-"] {
  background-image: url("https://app.10000ft.com/images/compSpritesButtonsIcons.png?8");
}

.icon-custom-logo { background-position : -530px -700px; width : 142px; height : 158px;  }
.icon-custom-intheoffice { background-position: -395px -60px; width: 24px; height: 24px  } 

And then in your markup,

<i class="icon-search"></i> a standard bootstrap icon
<i class="icon-custom-intheoffice"></i> a custom icon, using our own sprite file.
<i class="icon-custom-logo"></i> a logo, an even bigger sprite icon
<!-- spritefile from www.10000ft.com. not for reuse, please -->

Note that this assumes a single sprites file that contains all the icons. If you have multiple sprite files, the background-image needs to be set for each icon, accordingly.

JSFiddle at http://jsfiddle.net/shyamh/cvHdt/

This solution is based on the example posted by Kevin

Answer 2

You can create your own icon by defining it in your own class like s:

.icon-car {
    background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png");
    background-position: center center;
}

Keeping in mind of course to use the prefix .icon-* since it is targetted by an attribute selector set by the bootstrap to apply all styles (widh/height/line-height etc...).

Just try to keep to the same width and height as the original icons (14x14), this way you won't have to define your own width and height and it won't mess with the line-height of your elements. Here is a demo with such a case: http://jsfiddle.net/RwFeu/