Symbol CSS-Vorlagen

Funktionale Icon-CSS-Vorlagen für Karten und anklickbare Bedienelemente

Jedes Icon bringt einige grundlegende Entscheidungen mit sich: wie groß es ist, welche Form dahinter liegt und was passiert, wenn der Mauszeiger darüberfährt. Icon-CSS-Vorlagen enthalten diese Entscheidungen bereits. Die Blöcke reichen von Dienstleistungskarten und Kontaktzeilen bis hin zu Icon-Schaltflächen. Gemeinsame Klassen gestalten jedes Element in einer Gruppe konsistent, sodass eine neue Karte automatisch dieselbe Größe und Farbe übernimmt.

Typische integrierte Regeln für Karten

Blöcke dieser Kategorie bringen üblicherweise Regeln wie diese mit:

1. einheitliche Breite und Höhe für jedes Icon in der Gruppe, damit keines unbeabsichtigt größer wirkt;
2. ein gefüllter oder umrandeter Kreis hinter dem Symbol oder ein Quadrat mit abgerundeten Ecken;
3. ein fester Abstand zwischen dem Icon und seiner Überschrift, der Zeilen bündig hält, wenn Titel umbrechen;
4. eine mit der Farbpalette des Themes verknüpfte Akzentfarbe, sodass sich das gesamte Set gemeinsam anpasst.

Diese Regeln gelten für SVG-Icons und Schrift-Icons gleichermaßen. In einer Kontaktzeile teilen sich alle Kanalsymbole dieselbe Größe. Die E-Mail-Zeile kann dennoch einen kräftigeren Akzent erhalten, wenn dies Ihr Hauptkanal ist. Auch die Strichstärke spielt eine Rolle, da feine Linien-Icons auf Smartphone-Bildschirmen deutlich früher verblassen als gefüllte Varianten.

Wiederholte Zellen und anklickbare Zustände

In Nicepage wiederholt das Grid Repeater Element das Layout und den Stil seiner Zellen. Jede Spalte behält dennoch ihr eigenes Icon und ihren Text. Ändern Sie die Kreisfarbe in einer Zelle, folgen die übrigen automatisch. Ein statisches Dienstleistungsraster benötigt selten mehr. Anklickbare Icons für Suche, Teilen oder das Schließen eines Panels unterscheiden sich davon, weshalb die Vorlage folgende Zustände definieren sollte:

1. ein Standard-Erscheinungsbild, das sich ruhig in den umgebenden Text einfügt;
2. einen Hover-Zustand, der Farbe oder Hintergrund beim Überfahren mit dem Mauszeiger anpasst;
3. einen Aktiv- oder Fokus-Zustand für den eigentlichen Klick sowie für Tastaturnutzer;
4. einen hervorgehobenen Zustand, der die aktuelle Auswahl markiert, beispielsweise einen aktiven Filter.

Ganze Gruppen auf einmal umfärben

Über die Theme-Farben in den Nicepage-Website-Einstellungen aktualisiert das Ändern eines Akzents jedes Icon auf den Seiten des Projekts, das ihn verwendet. Warn- und Bestätigungssymbole werden besser von diesem Akzent ausgenommen: Sie passen sich ihren Nachbarn in der Größe an und nutzen ihre eigene Farbe. Größen lassen sich zudem pro Responsive-Modus anpassen, sodass ein großes dekoratives Symbol auf Mobiltelefonen kleiner dargestellt wird. Wenn die visuellen Steuerelemente nicht ausreichen, ergänzt Custom CSS Code eine Regel für ein einzelnes Element, eine einzelne Seite oder die gesamte Website.

Eine Dienstleistungsraster-Vorlage kommt oft mit einem einzigen statischen Icon-Stil aus. Bei Schaltflächen und Schaltern sollten Sie vor der Palette die Zustände prüfen, da ein Steuerelement, das beim Klick keine Veränderung zeigt, fehlerhaft wirkt.