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

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,

 a standard bootstrap icon
 a custom icon, using our own sprite file.
 a logo, an even bigger sprite icon

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