Question

在Twitter Bootstrap 3.0中使用仅含有glyphicon的按钮的正确标记是什么？如果我使用以下

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

我得到这样的东西：

enter image description here

更新

我在我的样式和@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

或者您可以将glyphicon本身用作按钮

<div id="TrashButton" class="glyphicon glyphicon-trash" style="cursor:pointer"></div>

然后设置＆＃34; onclick＆＃34;它的方法......

$("#TrashButton").on("click", function () {

    //do something

});

Answer 3

似乎有点晚了，但正确答案是：

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

您必须在span类中添加glyphicon和glyphicon- {type}，而不是元素。祝你好运

Answer 4

嗨我有同样的问题。我发现index.html中缺少<!DOCTYPE html>。我添加了这个按钮后，按钮的尺寸正确。希望这会有所帮助;）

Answer 5

（3.0版之前）不应该......

<button type="button" class="btn btn-small btn-danger">
  <i class=" icon-trash"></i>
</button>

Answer 6

简单地使用 <span role="button" class="glyphicon glyphicon-trash btn-lg" onclick="yourFunction()"></span>

如何在twitter bootstrap中使用仅带有glyphicons的按钮

6 个答案: