Vorteilsliste mit Icons (Häkchen) in HTML und CSS
Schreibe einen Eintrag pro Zeile. Für Titel und Beschreibung trenne mit |. Wähle Icon, Farben und Spalten.
So geht’sVorteile, die man auf einen Blick liest
Verfügbar auf: 
Vorteilsliste mit Icons (Häkchen) in HTML und CSS: wofür es gut ist
Verwandle die Vorteilsliste deines Produkts oder deiner Leistung in eine Liste mit Icons: Häkchen, Häkchen im Kreis, Pfeil, Stern, Herz oder Blitz, mit oder ohne Hintergrundkreis, in einer oder zwei Spalten und in der Farbe der Marke. Jeder Eintrag kann Titel und Beschreibung haben, getrennt durch |.
Das Icon kommt aus dem CSS, mit einem kleinen SVG als Maske, gefärbt über die Variable --cor-icone. Das HTML bleibt also eine einfache Liste, die Google und Screenreader verstehen, und das Icon aller Einträge zu ändern heißt, eine Zeile zu ändern.
So geht’s
- Schreibe die Einträge, einen pro Zeile.
- Wähle Icon, Spalten und Farbe.
- Kopiere den Code für die Website.
Wann nutzen
- Vorteilsbereich der Startseite.
- Liste dessen, was in einem Tarif enthalten ist.
- Verkaufsseite für eine Leistung.
Häufige Fragen
Warum kommt das Icon per CSS?
Weil das HTML so sauber bleibt, eine einfache Liste mit li, und das Icon Dekoration ist: Der Screenreader liest nur den Text des Eintrags, und du änderst das Icon aller Einträge, indem du eine CSS-Zeile änderst.
Wie funktioniert das Icon ohne Bild?
Jeder Eintrag hat ein ::before mit einem kleinen SVG als Maske (mask-image), gefärbt in der gewählten Farbe. Es funktioniert in allen aktuellen Browsern, und die Farbe ändert sich über die Variable --cor-icone.
Wo nutze ich die Vorteilsliste?
Im Vorteilsbereich der Startseite, in der Beschreibung einer Leistung, neben dem Preis eines Tarifs und auf Verkaufsseiten. Beginne jeden Eintrag mit dem Ergebnis für den Kunden, nicht mit dem Merkmal.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.