How to add custom icon in Twitter Bootstrap?

by

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 (14×14), 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/

Leave a Comment

tech