Vorlagen Icon & Iconboxen

Sie finden verfügbare Icon-Namen in der Font Awesome 6 Bibliothek für die Iconsätze „solid“, „regular“ und „brands“.

Der Iconsatz muss mit aufgeführt werden. Wenn das Icon zum Beispiel „fa-hippo“ heißt und zum Iconsatz „solid“ gehört, schreiben Sie: [icon icon="solid hippo"] . Der „fa-„Prefix wird also ebenfalls weggelassen.

Icons als Zeichen in Überschriften und Fließtext

Eine Überschrift

Ein Fließtext mit einem -Icon.

Eine [icon icon="solid frog"] Überschrift

Ein Fließtext mit einem [icon icon="solid frog"]-Icon.

Icon-Boxen

Bei einer höheren Boxanzahl kann es vorkommen, dass die dritte Box auf eine eigene Zeile umgebrochen wird.

Feature 1

Um was es in diesem Projekt geht. Ein etwas längerer Abschnitt der die Überschrift gut beschreibt.

Mehr erfahren

Feature 2

Um was es in diesem Projekt geht. Ein etwas längerer Abschnitt der die Überschrift gut beschreibt.

Mehr erfahren

[columns number="2"]
[column span="1"]
[alert color="#fff" border_color="#041E42"]
[icon icon="solid frog" style="5x" alt="Ein sitzender Frosch."]

Feature 1

Um was es in diesem Projekt geht. Ein etwas längerer Abschnitt der die Überschrift gut beschreibt.
[divider]
[button style="ghost" link="www.wordpress.rrze.fau.de"]Mehr erfahren[/button]
[/alert]
[/column]
[column span="1"]
[alert color="#fff" border_color="#041E42"]
[icon icon="solid cat" style="5x" alt="Eine sitzende Katze."]

Feature 2

Um was es in diesem Projekt geht. Ein etwas längerer Abschnitt der die Überschrift gut beschreibt.
[divider]
[button style="ghost" link="www.wordpress.rrze.fau.de"]Mehr erfahren[/button]
[/alert]
[/column]
[/columns]

Invertierte Icon-Boxen

Bei einer höheren Boxanzahl kann es vorkommen, dass die dritte Box auf eine eigene Zeile umgebrochen wird.

Feature 1

Um was es in diesem Projekt geht. Ein etwas längerer Abschnitt der die Überschrift gut beschreibt.

Mehr erfahren

Feature 2

Um was es in diesem Projekt geht. Ein etwas längerer Abschnitt der die Überschrift gut beschreibt.

Mehr erfahren

[columns number="2"]
[column span="1"]
[alert color="#041E42" border_color="#fff" font="light"]
[icon icon="solid frog" style="5x" alt="Ein sitzender Frosch."]

Feature 1

Um was es in diesem Projekt geht. Ein etwas längerer Abschnitt der die Überschrift gut beschreibt.
[divider]
[button style="ghost" link="www.wordpress.rrze.fau.de"]Mehr erfahren[/button]
[/alert]
[/column]
[column span="1"]
[alert color="#041E42" border_color="#fff" font="light"]
[icon icon="solid cat" style="5x" alt="Ein sitzender Frosch."]

Feature 2

Um was es in diesem Projekt geht. Ein etwas längerer Abschnitt der die Überschrift gut beschreibt.
[divider]
[button style="ghost" link="www.wordpress.rrze.fau.de"]Mehr erfahren[/button]
[/alert]
[/column]
[/columns]

Iconboxen für drei Schritte

In 3 Schritten zur eigenen Webseite an der FAU

Webangebot auswählen

Entscheidungshilfe

Webadresse auswählen

Mehr erfahren

Antrag über IdM stellen

Antrag stellen

In 3 Schritten zur eigenen Webseite an der FAU

[columns number="3"]
[column span="1"]
[alert color="#fff" border_color="#04316A"]
[icon icon="solid 1" style="5x" alt="Schritt 1."]

Webangebot auswählen

[divider]
[button style="ghost" link="https://www.wordpress.rrze.fau.de/tutorials/schnelleinstieg/vorbereitungen/"]Entscheidungshilfe[/button]
[/alert]
[/column]
[column span="1"]
[alert color="#fff" border_color="#04316A"]
[icon icon="solid 2" style="5x" alt="Schritt 2."]

Webadresse auswählen

[divider]
[button style="ghost" link="https://www.wordpress.rrze.fau.de/tutorials/schnelleinstieg/vorbereitungen/#domain"]Mehr erfahren[/button]
[/alert]
[/column]
[column span="1"]
[alert color="#fff" border_color="#04316A"]
[icon icon="solid 3" style="5x" alt="Schritt 3."]

Antrag über IdM stellen

[divider]
[button style="ghost" link="https://www.wordpress.rrze.fau.de/tutorials/schnelleinstieg/vorbereitungen/#antrag-webhosting"]Antrag stellen[/button]
[/alert]
[/column]
[/columns]