Wie kann man ein benutzerdefiniertes Icon in Twitter Bootstrap hinzufügen?

Question

Ich füge Icon mit Twitter Bootstrap ohne Problem hinzu. Sie haben viele Alternativen.

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

Allerdings konnte ich entsprechendes Symbol nicht für einen Menüpunkt finden. Es geht um "Auto". Was ich möchte ist, ich möchte mein benutzerdefiniertes Symbol hinzufügen. Wie kann ich das machen?

Answer 1

Sie können Ihr eigenes Symbol erstellen, indem Sie es in Ihrer eigenen Klasse wie s definieren:

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

Unter Berücksichtigung der Tatsache natürlich das Präfix .icon-* zu verwenden, da sie von einem Attributselektor durch die Bootstrap-Set abgezielt wird Wende alle Stile an (widh/height/line-height etc ...).

Nur versuchen, auf die gleiche Breite und Höhe wie die ursprünglichen Symbole (14x14) zu halten, so müssen Sie nicht Ihre eigene Breite und Höhe definieren und es wird nicht mit der line-height Ihrer Elemente durcheinander bringen. Hier ist eine Demo mit einem solchen Fall: http://jsfiddle.net/RwFeu/

Answer 2

Hier ist, was wir tun, so dass alle Symbole in einer einzigen Sprite-Datei sind und Sie beliebig große Symbole zulassen können.

erstellen eine CSS-Datei wie

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

Und dann in Ihrem Markup,

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

Beachten Sie, dass dies eine einzelne Sprites Datei wird davon ausgegangen, dass die Symbole aller enthält. Wenn Sie mehrere Sprite-Dateien haben, muss die background-image für jedes Symbol entsprechend eingestellt werden.

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

Diese Lösung wird am Beispiel anhand von Kevin geschrieben