Wie füge ich das Warenkorb Glyph-Symbol hinter dem Preis in meiner Kopfzeile hinzu?

Question

In meinem Header habe ich die aktuelle Summe der Benutzer Warenkorb als nur eine Figur, die im Klartext angezeigt wird. Ich versuche, bootstraps glyphicon des Einkaufswagens neben ihm den Preis hinzuzufügen, aber es wird nur nicht angezeigt. Kann mir bitte jemand helfen, das zu lösen? Danke im Voraus!

Hinweis: Ich verwende ein WordPress, Woocommerce und Bootstrap und ich habe noch keine CSS-Werte hinzugefügt.

HTML:

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

Answer 1

Es ist einfach, wenn alles andere funktioniert ...

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 (ajust und die Werte ändern):

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

Diese CSS-Regeln sind nur ein Beispiel, Sie müssen alle Werte einstellen, um die Anzeige nach Ihren Wünschen zu gestalten. Möglicherweise müssen Sie auch einige Regeln für die Container <a> und <div> hinzufügen.