如何在标题中的价格后面添加购物车字形图标？

【问题标题】：How do I add the shopping cart glyph-icon behind the price in my header?如何在标题中的价格后面添加购物车字形图标？
【发布时间】：2016-08-20 14:04:47
【问题描述】：

在我的标题中，我有当前用户购物车的总数，只是一个以纯文本显示的数字。我正在尝试在价格旁边添加购物车的引导字形图标，但它只是没有显示出来。谁能帮我解决这个问题？提前致谢！

注意：我使用的是 wordpress、woocommerce 和 bootstrap，我还没有添加任何 CSS 值。

HTML：

<a class="cart-contents"><div id=basket><?php echo WC()->cart->get_cart_total(); ?><span class="glyphicons glyphicons-shopping-cart"></span></div></a>

【问题讨论】：

标签： php html wordpress woocommerce cart

【解决方案1】：

如果一切正常，那就很容易了……

HTML/PHP：

<a class="cart-contents">
    <div id=basket>
        <span class="glyphicons glyphicons-shopping-cart"></span>
        <span class="tot-price"><?php echo WC()->cart->get_cart_total(); ?></span>
    </div>
</a>

CSS （调整和更改值）：

.cart-contents > .basket > .tot-price {
    background-color: #000;
    box-sizing: border-box;
    border-radius: 1em;
    color: #fff;
    display: inline;
    font-size: 9px;
    left: 0;
    margin-left: -5px;
    padding: 2px 5px;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: -7px;
}

.cart-contents > .basket > .tot-price:hover {
    background-color: #eee;
    color: #000;
}

此 CSS 规则只是一个示例，您必须设置所有值才能根据需要进行显示。您可能还需要为容器 <a> 和 <div> 添加一些规则。

【讨论】：