Symbol

Übersicht

Die Avonni-Icon-Komponente verbessert die visuelle Attraktivität und Benutzererfahrung Ihrer Seiten durch aussagekräftige Symbole. Symbole sind leistungsstarke visuelle Hilfen, die Inhalte ansprechender machen und die Navigation intuitiver gestalten.

Einstellungen

🎛️ Eigenschaften

Name	Beschreibung	Verwendung
Icon-Name	Wählen Sie den Namen des anzuzeigenden Symbols.	Wählen Sie ein Symbol, das den Inhalt oder die damit verbundene Aktion klar darstellt und ergänzt.
Symbolgröße	Legen Sie die Größe des Symbols fest.	Wählen Sie eine Größe, die sicherstellt, dass das Symbol deutlich sichtbar ist und harmonisch in das Seitenlayout integriert wird.
Variante	Wählen Sie eine vordefinierte Stilvariante für das Symbol.	Wählen Sie eine Variante, die mit der kontextuellen Bedeutung oder Aktion des Symbols übereinstimmt und dessen visuelle Kommunikation verbessert.
Titel	Definieren Sie einen Titel für das Symbol.	Geben Sie einen Titel an, der den Benutzern zusätzlichen Kontext oder Informationen bietet, wenn sie mit der Maus über das Symbol fahren.
Alternativtext	Geben Sie einen Alternativtext für das Symbol an.	Geben Sie beschreibenden Text ein, der die Bedeutung oder Aktion des Symbols vermittelt, Barrierefreiheit sicherstellt und die SEO verbessert.
Horizontale Ausrichtung	Bestimmen Sie die horizontale Ausrichtung des Symbols innerhalb seines Containers.	Richten Sie das Symbol aus, damit es optimal im Inhaltslayout positioniert ist und visuelles Gleichgewicht sowie Fluss beibehält.

🎨 Gestaltung

Hintergrundfarbe	Legen Sie die Hintergrundfarbe für das Symbol fest.	Wählen Sie eine Hintergrundfarbe, die dafür sorgt, dass sich das Symbol abhebt und innerhalb des Seitendesigns visuell unterscheidbar ist.
Vordergrundfarbe	Legen Sie die Farbe des Symbols selbst fest.	Wählen Sie eine Farbe, die sicherstellt, dass das Symbol vor dem Hintergrund klar sichtbar ist und das Gesamtdesign ergänzt.
Vordergrund-Farb-Utility	Wenden Sie Utility-Klassen an, um die Vordergrundfarbe des Symbols zu ändern.	Verwenden Sie CSS-Utility-Klassen, um dem Symbol einfach vordefinierte Farbstyles zuzuweisen und so Konsistenz und einfache Designanpassung zu gewährleisten.
Randradius	Definieren Sie den Eckradius der Symbolbegrenzung.	Passen Sie den Rahmenradius an, um Symbole mit abgerundeten Ecken zu erstellen und die stilistische Darstellung der Symbole zu verbessern.