css - 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

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/