Посмотрите как во втором бутстрапе сделаны иконки:
[class^="icon-"],
[class*=" icon-"] {
/* основные стили */
}
.icon-glass { background-position: 0 0;}
.icon-music { background-position: -24px 0; }
.icon-search { background-position: -48px 0; }
...
У вас, видимо, будет что-то вроде:
<style>
[class^="badge-"],
[class*=" badge-"] {
display: block;
width: 100px;
heigh: 100px;
/* и другие базовые стили */
}
.badge-success { backgroun-image: url(badge1.png); }
.badge-important { backgroun-image: url(badge2.png); }
</style>
<body>
<i class="badge-success"></i>
<i class="badge-important"></i>
</body>
http://getbootstrap.com/2.3.2/assets/css/bootstrap.css
Может вы что-то типа этого хотите?
Но лично мне нравится вариант, который у вас изначально представлен. Да и бутстрап вот, к примеру, от таких хитростей обновился к варианту, как у вас опять же изначально. Так же ваш вариант хорошо описывается терминами БЭМ.
Если смотреть с другой стороны, то совсем не понятно, кто же выйграет от того, что вы пытаетесь сделать. Всем будет только хуже.