Как добавить пользовательский значок в Twitter Bootstrap?

Я добавляю значок с Twitter Bootstrap без проблем. У них много альтернатив.

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

Однако я не мог найти соответствующий значок для одного из пунктов меню. Речь идет о "машине". Я хочу, чтобы я добавил свой пользовательский значок. Как я могу это сделать?

Ответ 1

Вы можете создать свой собственный значок, указав его в своем собственном классе, например s:

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

Имея в виду, конечно, использовать префикс .icon-*, поскольку он настроен на селектор атрибутов, установленный бутстрапом, для применения всех стилей (widh/height/line-height и т.д.).

Просто старайтесь придерживаться той же ширины и высоты, что и исходные значки (14x14), поэтому вам не нужно будет определять свою собственную ширину и высоту, и это не будет бесполезно с line-height ваших элементов. Вот демонстрация с таким случаем: http://jsfiddle.net/RwFeu/

Ответ 2

Вот что мы делаем, чтобы все значки находились в одном файле спрайтов, и вы можете разрешать значки произвольного размера.

создать файл CSS, например

[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  }

И затем в вашей разметке

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

Обратите внимание, что это предполагает единственный файл спрайтов, содержащий все значки. Если у вас есть несколько спрайт файлов, необходимо установить background-image для каждого значка.

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

Это решение основано на примере, представленном Kevin