gelöst Button btn-add-to-cart mit Icon (Shopping-Cart) ergänzen

Ich versuche vergeblich dem Button btn-add-to-cart in der Produktinfo das Icon <i class="fa fa-shopping-cart"></i> vor den Buttontext zu implementieren. Leider sind bisher alle Versuche gescheitert.
Wie kann ich updatesicher solch ein Icon hinzufügen?

 

in welcher datei hast es den wie versucht?
updatesicher geht das wenn du den smartyblock des bereiches nimmst und nen eigenen machst. (Anleitung im Forum / Blog von gambio).

 

Guck mal in snippets/product_info/product_box_bottom.html

Code:

{block name="snippets_product_info_product_box_bottom_add_to_cart"}
            <div class="button-container">
                <input name="btn-add-to-cart" type="submit" class="btn btn-lg btn-buy btn-block js-btn-add-to-cart{if $DEACTIVATE_BUTTON == true} btn-inactive{/if}" value="{$txt.add_to_cart}" title="{$txt.add_to_cart}" />
            </div>
        {/block}
    

 

Hey vielen Dank!
Bin schlauer, aber meine Versuche sind trotzdem wieder gescheitert.
Blöde Frage, wie binde ich dann den Code <i class="fa fa-shopping-cart"></i> direkt in den Button ein?

Vermutlich mit CSS oder?

Ich habe folgende Anweisung geschrieben:
.add-to-cart-icon {
content: "\f07a";
font-family: FontAwesome;
font-weight: 600;
}

und dann so eingefügt:
<input name="btn-add-to-cart" type="submit" class="add-to-cart-icon btn btn-lg btn-buy btn-block js-btn-add-to-cart{if $DEACTIVATE_BUTTON == true} btn-inactive{/if}" value="{$txt.add_to_cart}" title="{$txt.add_to_cart}" />

Da wird das Icon aber nicht angezeigt, der Text vom Button wird dann verändert.
Worin liegt der Fehler?

 

Hast du evtl. noch ne Idee auf meinen letzten Post?

 

Schon einmal versucht, dass mit dem Tool "Texte ändern" zu ändern? Einfach das <i ...> Tag vor den Text setzen.

 

Hatte ich auch schon versucht, geht leider nicht.

 

Du hast da einen Fehler in deiner CSS-Anweisung. Die Regel "content:" funktioniert nur in Verbindung mit den Pseudo-Elementen :before und :after. Aber das wird dir in deinem Speziellen Fall leider auch nicht wirklich weiterhelfen, da input-Felder diese Pseudo-Elemente nicht besitzen und somit auch nicht per CSS gestaltet werden können. Was funktionieren könnte ist folgendes:

Gib deinem Button ein Container-Element, zum Beispiel ein div oder span und Style das mit CSS:

Code:

.button-container:before {
    content: "\f07a";
    font-family: FontAwesome;
    font-weight: 600;
}

Möglicherweise muss dann die Position noch angepasst werden und der Inhalt des Buttons muss ein Stück nach rechts wandern, damit das richtig angezeigt wird.

 

Das habe ich eben getestet, er setzt dann vor den Button das Icon und nicht im Button.

 

Deswegen schrieb ich, dass die Position möglicherweise noch angepasst werden muss . Das kann ich allerdings nicht einfach mal eben aus dem Ärmel schütteln, dafür muss ich deinen Shop sehen und das CSS darauf anpassen

 

Kein Problem :
https://technibuy.de/fernsehtechnik...ss-stecker-18v-1200ma-fuer-multischalter.html

Ich habe auch alle Zugangsdaten in eurem Kundencenter hinterlegt, theoretisch könntest du am offenen Herzen schauen.

 

Versuchs mal damit:

Code:

.button-container::before {
    content: "\f07a";
    font-family: FontAwesome;
    font-weight: 600;
    position: absolute;
    margin-left: 15px;
    font-size: 18px;
    color: #ffffff;
    margin-top: 10px;
    margin-bottom: 10px;
}

 

geht, du bist der Beste...
Vielen Dank!!!