Button with icon¶

Überblick¶

Der Block Button with icon erzeugt einen Bootstrap‑Button mit eingebettetem Icon (SVG).
Er eignet sich als Call‑to‑Action‑Element, das sich gut mit Font Awesome Pro Icons kombinieren lässt.

Der Block wird im LiveCanvas‑Panel unter TWtheme → Button with icon angeboten.

Block-Struktur¶

Das Standard‑Template basiert auf einem <a>-Element mit Bootstrap‑Button‑Klassen wie btn, btn-primary, icon-link und btn-lg. Im Link selbst stehen der Button‑Text und ein eingebettetes SVG‑Icon. Dieses Icon trägt den Helper lc-helper="twtheme-fontawesome-pro" und kann dadurch im Editor gezielt ersetzt werden.

Text, URL und Klassen lassen sich wie bei jedem normalen LiveCanvas‑Element direkt anpassen.

Zusammenspiel mit FontAwesome Pro¶

In Kombination mit dem separaten FontAwesome Pro‑Panel kannst du das Icon ohne manuelles SVG‑Editing austauschen. Der typische Ablauf ist: passendes Icon‑Set wählen, Icon suchen und per Klick ersetzen. Dadurch bleibt der Aufbau des Buttons stabil und gleichzeitig flexibel für Designvarianten.

Tipps für die Gestaltung¶

Nutze Bootstrap‑Utility‑Klassen wie btn-lg, rounded-0 oder icon-link-hover, um Größe, Form und Hover‑Verhalten an deine Designlinie anzupassen. Für gute Zugänglichkeit sollte der Kontrast zwischen Hintergrund, Text und Icon ausreichend hoch sein, besonders bei primären CTA‑Elementen.