Symbol HTML-Vorlagen

Gebrauchsfertige Icon-HTML-Templates

Icon-Pakete sind leicht zu finden, und viele sind kostenlos. Was Zeit kostet, ist der Aufbau der Blöcke drumherum: Karte für Karte mit einer Überschrift und einer Textzeile unter jedem Symbol. Icon-HTML-Templates nehmen Ihnen diese Arbeit ab. Sie erhalten direkt bearbeitbare HTML-Abschnitte, in denen die Icons bereits in fertigen Layouts platziert sind.

Vier Arten, wie ein Symbol auf Text trifft

Die meisten Templates hier basieren auf wenigen Anordnungen, die jeweils zu unterschiedlichen Inhalten passen:

• ein Icon über einer Überschrift: die vertraute Vorteils-Karte für eine Reihe kurzer Pluspunkte;
• ein Icon neben einem Absatz: lässt sich besser lesen, wenn jeder Punkt einen oder zwei Sätze benötigt;
• ein Raster aus Icon-Zellen für eine Dienstleistungsübersicht: häufig mit einer Schaltfläche unter jeder Beschreibung;
• eine Kontaktzeile, bei der ein kleines Symbol neben jeder Rufnummer oder Adresse steht.

Einige Dienstleistungen haben kein naheliegendes Symbol. Für Lieferung gibt es einen Lkw und für Support ein Headset, aber Steuerberatung endet meist mit einem allgemeinen Dokumentensymbol, sodass die Überschrift die Erklärung übernehmen muss. Kontaktdaten geben einem Icon eine praktischere Aufgabe. Mit Icon im Text von Nicepage sitzt ein Icon innerhalb einer Textzeile und kann direkt mit einer Telefonnummer oder E-Mail-Adresse verlinkt werden.

Vom Demo-Inhalt zum exportierten Code

Im Nicepage-Editor tauschen Sie die Demo-Icons gegen eigene Uploads oder integrierte Icons aus. Anschließend passen Sie die Überschriften an und verlinken die Elemente mit ihren Zieladressen. Nach dem Export bleiben die HTML-Dateien zur direkten Bearbeitung verfügbar, sodass Entwickler ein SVG ersetzen, das Markup anpassen oder einen Abschnitt in ein bestehendes Projekt übertragen können.

Ein einzelnes Kartenlayout kann auf einer Seite Dienstleistungen und auf einer anderen Onboarding-Schritte darstellen. Es ändern sich lediglich Icon, Überschrift und Text in jeder Karte. Die Abschnitte sind responsiv, sodass sich eine Reihe von Icon-Karten auf Smartphones passend anordnet und die Symbole gut erkennbar bleiben.

Elemente vorab genau planen

Gehen Sie von Ihren tatsächlichen Inhalten aus und wie viel Text jeder Punkt erfordert. Ein Raster für kurze Vorteile wirkt unausgewogen, wenn eine Karte einen ganzen Absatz braucht, und ein Kontaktblock für drei Kanäle hinterlässt eine Lücke, wenn Sie nur zwei auflisten. Entscheiden Sie frühzeitig, ob Elemente einen Link oder einen Button benötigen, da das nachträgliche Hinzufügen in kompakten Karten selten stimmig aussieht. Für eine einfache Liste von Vorteilen kann eine Icon-Liste mit SVG-Aufzählungspunkten bereits genügen. Da ein exportierter Abschnitt in bestehenden Projekten eingesetzt werden kann, können Sie gezielt ein Template für einen gelungenen Kontakt- oder Service-Block wählen und den Rest ignorieren.