38

TwitterBootstrapで問題なくアイコンを追加しています。彼らにはたくさんの選択肢があります。

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

しかし、メニュー項目の1つに適切なアイコンが見つかりませんでした。「車」についてです。カスタムアイコンを追加したいのですが。これどうやってするの？

4

2 に答える 2

64

次のように独自のクラスでアイコンを定義することにより、独自のアイコンを作成できます。

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

于 2012-05-01T11:09:53.717 に答える
14

これが私たちが行うことです。これにより、すべてのアイコンが1つのスプライトファイルに含まれ、任意のサイズのアイコンを許可できるようになります。

次のような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（http://jsfiddle.net/shyamh/cvHdt/ ）

このソリューションは、 Kevinによって投稿された例に基づいています

于 2013-05-03T15:29:59.640 に答える