Question

我正在使用带有glyphicon的Bootstrap状态按钮：

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

但是当我在JS中启用状态时：

$target.button('deleting');

文本正确更改并且按钮禁用，但图标也会消失。这是可以理解的，因为我猜Bootstrap只是替换了按钮的内容。

如何让我的按钮保留其图标？我真的希望这里的正确答案不是将<span>元素的另一个副本嵌入到data-deleting-text属性中，因为这会吸引很多！

Answer 1

确实，我的第一个想法是将<span>元素放入数据属性：

<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>

但是你有另一个选择：把你的.glyphicon类放在按钮上，并覆盖Bootstrap CSS以使其运行良好：

<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;
}

Bootply

注意：::first-letter仅适用于＆gt; = IE9

Answer 2

为什么不把文字放在一个范围内并用给定的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>

如何在Bootstrap有状态按钮中创建一个glyphicon

2 个答案: