Как использовать кнопки только с глификонами в twitter bootstrap

Какова правильная разметка для использования кнопки с только глификоном в ней в Twitter Bootstrap 3.0? Если я использую следующие

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

Я получаю что-то вроде этого:

enter image description here

Update:

Я сделал разницу между стилями на моем и элементе @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;

Ответы

Ответ 1

Попробуйте добавить неиспользуемое пространство после прокрутки значка.

Вот так:

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

Ответ 2

Кажется, что немного поздно, но правильный ответ:

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

Вы должны добавить глификон и glyphicon- {type} в класс span, а не элемент. Удачи

Ответ 3

Или вы можете просто использовать сам глификон как кнопку

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

а затем установите для него метод "onclick"...

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

    //do something

});

Ответ 4

Привет, у меня была та же проблема. Я узнал, что <!DOCTYPE html> отсутствует в index.html. После того, как я добавил это, кнопка имела правильный размер. Надеюсь, это поможет;)

Ответ 5

(до версии 3.0) Разве это не должно быть...

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

Ответ 6

Просто используйте <span role="button" class="glyphicon glyphicon-trash btn-lg" onclick="yourFunction()"></span>