Zum Inhalt

Icons

Überblick

Das Add‑on Icons stellt eine zentrale Icon‑Bibliothek bereit und ermöglicht die Auswahl von SVG‑Icons im Backend. Icons können in Feldern gespeichert oder per Shortcode im Content verwendet werden.

Zusätzlich bringt das Add‑on eine LiveCanvas-Integration mit: Im Builder steht ein eigener Icon-Block (twtheme-icon) zur Verfügung, der denselben Icon-Dialog nutzt.

Icons im Backend auswählen

In Feldern vom Typ Icon öffnet sich ein Icon‑Dialog:

  • Suche nach Icons
  • Auswahl aus Bibliotheken (Ordnern)
  • Vorschau des gewählten SVG
  • Optionales Bearbeiten des SVG‑Codes

Icon‑Feld verwenden

Wenn ein Feld als Icon definiert ist, kannst du im Backend:

  1. Icon auswählen (Dialog öffnen)
  2. Icon speichern
  3. Optional SVG bearbeiten (Edit‑Modus)

Shortcode

Icons können direkt im Content eingesetzt werden:

[icon name="anchor" style="brands"]

Zusätzliche CSS‑Klasse:

[icon name="anchor" style="brands" class="text-primary"]

Bibliotheken

Icons werden aus Bibliotheken (Ordnern) geladen. Die Auswahl erfolgt im Dialog über Tabs.

LiveCanvas-Bezug

Das Add-on ist direkt mit den LiveCanvas-Blöcken verbunden:

  • Eigener Block Icon (twtheme-icon) aus icons/livecanvas/blocks
  • Gemeinsamer Icon-Dialog in LiveCanvas und Backend-Feldern
  • Gemeinsame Assets: icons.js, icons-livecanvas.js, icons.css

Verwandte LiveCanvas-Dokumentation:

Anwendung im Frontend

Icons erscheinen im Frontend dort, wo du sie per Shortcode oder über Felder (z. B. Social Media) ausgibst.

Entwicklertipps

  • Icon‑Ordner liegen unter includes/theme-options/add-ons/icons/svgs/.
  • Shortcode‑Parameter: name, style, class.

Twtheme Hooks & Filter

Hook/Filter Typ Parameter Zweck
twtheme_custom_field_input Filter ($output, $field) Feldtyp icon rendern.
twtheme_tinymce_shortcodes Filter ($shortcodes) Icon‑Shortcode in TinyMCE anbieten.
twtheme_livecanvas_block_dirs Filter ($dirs) LiveCanvas-Block-Verzeichnis für Icons registrieren.