css - Twitterブートストラップでグリフィコンのみのボタンを使用する方法

Question

Twitter Bootstrap 3.0でグリフィコンのみのボタンを使用するための適切なマークアップは何ですか? 次を使用する場合

<button type="button" class="btn btn-xs btn-danger">
  <span class="glyphicon glyphicon-trash"></span>
</button>

私はこのようなものを得る：

アップデート：

私は自分のスタイルと@Adriftの<button>要素の差分を取り、次の結果を得ました:

# -- is mine

--webkit-perspective-origin: 12px 8px;
+-webkit-perspective-origin: 12px 11px;

--webkit-transform-origin: 12px 8px;
+-webkit-transform-origin: 12px 11px;

-height: 16px;
+height: 22px;

-text-rendering: auto;
+text-rendering: optimizelegibility;

Answer 1

アイコン スパンの後に改行しないスペースを追加してみてください。

このような：

<button type="button" class="btn btn-xs btn-danger">
  <span class="glyphicon glyphicon-trash"></span>&nbsp;
</button>

Answer 2

少し遅いようですが、正解は次のとおりです。

<button class="btn btn-info" type="button"> <span class="glyphicon glyphicon-refresh"></span> </button>

要素ではなく、span クラスに glyphicon と glyphicon-{type} の両方を追加する必要があります。幸運を

Answer 3

単に使用する <span role="button" class="glyphicon glyphicon-trash btn-lg" onclick="yourFunction()"></span>