更新按钮文本后，Bootstrap 图标丢失

Question

我在按钮上添加了一个图标，如下所示：

当用户将商品添加到购物车时，按钮变为 添加商品后

每当用户将商品添加到购物车时，我都会尝试更新按钮的文本。它能够更新文本，但图标消失了。

这是 html。

<div class="wrapper">

<button class="btn btn-primary" id="btnView" data-toggle="modal" data-target="#myModal"><i class="fa fa-cart-plus"></i> 0 Item(s) in cart</button>

            </div>

这是包装器的 css

.wrapper { 

    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

    float: right; /* if you had floats before? otherwise inline-block will behave differently */

}

当用户将商品添加到购物车时，我正在更新文本

$('#btnView').text( aItems.length + ' Item(s) in cart' );

我可以在保持图标的同时更新文本吗？我错过了什么吗？

谢谢你们！

Answer 1

试试下面的代码：$('#btnView').html(`<i&nbsp;class="fa&nbsp;fa-cart-plus"></i>&nbsp;${aItems.length}&nbsp;Item(s)&nbsp;in&nbsp;cart`);