Stapeln von Icons

Dank der in Font Awesome enthaltenen Styling-Unterstützung können Icons ganz einfach gestapelt werden.

Um Icons zu stapeln, verwenden Sie die Klasse .fa-stack im übergeordneten HTML-Element der beiden Icons, die Sie stapeln möchten.

Fügen Sie anschließend die Klasse .fa-stack-2x für das größere Icon und die Klasse .fa-stack-1x für das normal große Icon hinzu.

Damit das Icon mit der Klasse .fa-stack-1x sichtbar wird, fügen Sie die Klasse .fa-inverse hinzu.

<span class="fa-stack">
<i class="fas fa-square fa-stack-2x"></i><!-- das untere Icon -->
<i class="fas fa-envelope fa-stack-1x fa-inverse"></i><!-- das obere Icon -->
</span>
CSS Klassen zum stapeln von Icons
CSS Klasse Beschreibung
.fa-stack Wird auf einem übergeordneten HTML-Element der beiden zu stapelnden Symbole angewendet
.fa-stack-2x Wird für das Symbol verwendet, das beim Stapeln größer angezeigt werden soll.
.fa-stack-1x Wird für das Symbol verwendet, das in gestapelter Form in der Grundgröße angezeigt werden soll.
.fa-inverse Invertiert die Farbe des Symbols, das beim Stapeln in der Grundgröße angezeigt wird.

Sie können sogar größere Icon-Klassen (z.B .fa-2x) auf das übergeordnete Element (.fa-stack) anwenden, um die Größe noch besser steuern zu können.

<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x"></i><!-- das untere Icon -->
<i class="fas fa-envelope fa-stack-1x fa-inverse"></i><!-- das obere Icon -->
</span>

In diesem Beispiel ist das Basis Icon [das Icon, das unten liegt (.fa-stack-1x)] kleiner als das gestapelte Icon (.fa-stack-2x).

<span class="fa-stack fa-2x">
<i class="fas fa-camera fa-stack-1x"></i><!-- das untere Icon -->
<i class="fas fa-ban fa-stack-2x" style="color: tomato;"></i><!-- das obere Icon -->
</span>

Farben bei gestapelten Icons

Gestapelte Icons lassen sich problemlos farbig gestalten – jede Ebene (.fa-stack-1x oder .fa-stack-2x) kann eine eigene Farbe erhalten. Das ist ein typisches Einsatzszenario und technisch völlig in Ordnung.

Wichtig ist jedoch, auf ausreichenden Kontrast zu achten:

  • Vorder- und Hintergrund-Icon sollten sich deutlich unterscheiden, damit die Form auch für Nutzer*innen mit eingeschränktem Sehvermögen erkennbar bleibt.
  • Prüfen Sie den Farbkontrast ( z. B. mit einem WCAG-Kontrast-Checker ), besonders wenn das Vordergrund-Icon eine helle Farbe auf hellem Hintergrund verwendet.

Ausrichten gestapelter und normaler Symbole

Sie können gestapelte Symbole direkt neben einzelnen Symbolen verwenden. Da gestapelte Symbole durch das enthaltene CSS doppelt so groß wie einzelne Symbole sind, müssen Sie entweder die Größe des gestapelten Symbols verkleinern oder die Größe der einzelnen Symbole vergrößern.

Gestapelte Icons werden intern als inline-block dargestellt. Damit sie trotzdem auf derselben Grundlinie (Baseline) oder am oberen Rand ausgerichtet werden, kann die CSS-Eigenschaft vertical-align am Container (.fa-stack) gesetzt werden. Mit style="vertical-align: top;" wird das gestapelte Icon am oberen Rand des Textblocks ausgerichtet, sodass es optisch auf gleicher Höhe wie die danebenstehenden Einzel-Icons erscheint.

<i class="far fa-circle fa-2x"></i>

<span class="fa-stack" style="vertical-align: top;">
<i class="far fa-circle fa-stack-2x"></i><!-- das untere Icon -->
<i class="fas fa-star fa-stack-1x"></i><!-- das obere Icon -->
</span>

<i class="fas fa-circle fa-2x"><i>

<span class="fa-stack" style="vertical-align: top;">
<i class="fas fa-circle fa-stack-2x"></i><!-- das untere Icon -->
<i class="fas fa-star fa-stack-1x fa-inverse"></i><!-- das obere Icon -->
</span>

Barrierefreiheit

Icons sind nicht nur visuelle Gestaltungselemente, sondern sollten auch für Screenreader zugänglich sein. Damit dies gelingt, empfiehlt es sich:

  • Bedeutungsvolle Icons (z. B. in Beispielen oder Buttons) mit einem role="img" und einem passenden aria-label zu versehen. So können Screenreader-Nutzer*innen den Sinn des Icons erfassen.
  • Rein dekorative Icons mit aria-hidden="true" aus dem Accessibility-Tree auszuschließen. Dadurch werden unnötige oder doppelte Informationen vermieden.
<p>Icon mit Bedeutung</p>

<span class="fa-stack"
      role="img"
      aria-label="Beispiel: Briefumschlag im Quadrat">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fas fa-envelope fa-stack-1x fa-inverse"></i>
</span>

<p>Dekoratives Icon</p>

<span class="fa-2x" aria-hidden="true">
<i class="fas fa-circle"></i>
</span>