css - examples - bootstrap tutorial




Wie füge ich ein benutzerdefiniertes Symbol in Twitter Bootstrap hinzu? (2)

Hier ist, was wir tun, damit sich alle Symbole in einer einzigen Sprite-Datei befinden und Sie beliebige Symbole zulassen können.

Erstellen Sie 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 mit allen Symbolen voraussetzt. Wenn Sie über mehrere Sprite-Dateien verfügen, muss das background-image für jedes Symbol entsprechend festgelegt werden.

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

Diese Lösung basiert auf dem von Kevin geposteten Beispiel

Ich füge das Icon bei Twitter Bootstrap ohne Probleme hinzu. Sie haben viele Alternativen.

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

Ich konnte jedoch kein passendes Symbol für einen Menüpunkt finden. Es geht um "Auto". Ich möchte mein benutzerdefiniertes Symbol hinzufügen. Wie kann ich das machen?


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

Denken Sie daran, natürlich das Präfix .icon-* da es von einem Attributselektor festgelegt wird, der vom Bootstrap festgelegt wurde, um alle Stile (Widh / Höhe / Zeilenhöhe usw.) anzuwenden.

Versuchen Sie einfach, die gleiche Breite und Höhe wie die Originalsymbole (14x14) beizubehalten. Auf diese Weise müssen Sie keine eigene Breite und Höhe definieren, und die Zeilenhöhe Ihrer Elemente wird dadurch nicht beeinträchtigt. Hier ist eine Demo mit einem solchen Fall: http://jsfiddle.net/RwFeu/





twitter-bootstrap