Twitter bootstrap 如何在引导有状态按钮中使用glyphicon

我正在使用一个带图标的引导状态按钮：

<button type="button" data-deleting-text="Deleting..." class="btn btn-primary">
    <span class='glyphicon glyphicon-trash'></span>Delete
</button>

文本将正确更改，按钮将禁用，但图标也将消失。这是可以理解的，因为我猜引导只是在替换按钮的内容

---

如何使我的按钮保留其图标？我真的希望这里的正确答案不是将

元素的另一个副本嵌入到

数据删除文本

属性中，因为那样会很糟糕

事实上，我的第一个想法是将

元素放入数据属性中：

<button type="button" class="btn btn-primary" data-deleting-text="&lt;span class='glyphicon glyphicon-trash'&gt;&lt;/span&gt; Deleting...">
    <span class="glyphicon glyphicon-trash"></span> Delete
</button>

---

注意：

：：第一个字母

仅适用于>=IE9

为什么不将文本放在一个范围内，并使用给定的ID或类作为目标

<button type="button" data-deleting-text="Deleting..." class="btn btn-primary">
    <span class="glyphicon glyphicon-trash"></span>
    <span class="button-text">Delete</span>
</button>

删除

删除span并将类应用于按钮本身如何？我应该说我试过了。不幸的是，结果不是很好。部分原因是字形图标是作为字体实现的（我认为这在Bootstrap3中是新的）。我可以通过将文本包装成

使字体恢复正常来解决这个问题，但之后我又回到了原点-启用状态将导致

被删除。

$（'button'）.html（'Deleting'）很糟糕，但你应该这么做。。
<button type="button" class="btn btn-primary glyphicon glyphicon-trash" data-deleting-text="&nbsp;Deleting...">&nbsp;Delete</button>

.btn.glyphicon { // override .glyphicon style if it's set on a .btn
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 1.428571429;
}
.btn.glyphicon::first-letter { // keep the Glyphicon font for the first letter
    font-family: 'Glyphicons Halflings';
    line-height: 1;
}

<button type="button" data-deleting-text="Deleting..." class="btn btn-primary">
    <span class="glyphicon glyphicon-trash"></span>
    <span class="button-text">Delete</span>
</button>