Вопрос по css, twitter-bootstrap – Как добавить собственный значок в Twitter Bootstrap?

38

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

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

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

Ваш Ответ

2   ответа
64

определив его в своем собственном классе, например, 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/

Error: User Rate Limit Exceeded SNaRe
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded.icon-whiteError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded SNaRe
Error: User Rate Limit Exceededwhite icons sheet, black icons sheet.
14

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

создать файл 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 athttp://jsfiddle.net/shyamh/cvHdt/

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

Похожие вопросы