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
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.
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.
Zuletzt aktualisiert
War das hilfreich?
