web-dev-qa-db-ja.com

CSSでTwitter Bootstrapグリフィコンを使用する

方法はわかりませんが、Twitter bootstrapグリフィコンを追加して、下のCSSファイルの画像参照を置き換えたいと思います。

.edit-button {
  background: url('../img/edit.png') no-repeat;
  width: 16px;
  height: 16px;
}

HTMLでは、次のように追加します。

<i class="icon-search icon-white"></i>

何か案は？

更新-Firefoxのfirebugで幅と高さのみが表示されますが、次を試してください：

.edit-button
{
  /* background: url('../img/edit.png') no-repeat; */
  background: url(../img/glyphicons-halflings.png) no repeat -96px -72px !important;
  width: 16px;
  height: 16px;
}

なぜそれが拾われていないのか分かりませんか？

cssimagetwitter-bootstrapglyphicons
21
user1746582

それでは、なぜ<i>編集用のタグボタン？これを試して：

<button type="submit" name="edit" class="edit-button btn btn-primary">
   <i class="icon icon-edit icon-white"></i>
   Edit
</button>
2
Tepken Vannkorn

：afterまたは：beforeメソッドを使用するのが好きです...

[〜＃〜] html [〜＃〜]

<a href="http://glyphicons.com/" class="arrow">Click Here</a></div>

[〜＃〜] css [〜＃〜]

.arrow:after {
  font-family: "Glyphicons Halflings";
  content: "\e080";
}

これは、グリフィコンフォントがあることを前提として機能します（Bootstrapで無料で提供されます）

109
Nick