Ligature-Icons über Pseudo-Elemente und Icon Fonts

Der folgende Beitrag stammt von Jason Jacobson, einem leitenden Ingenieur für das in Minneapolis ansässige Startup LeadPages®. Jason zeigt etwas, von dem ich nicht wusste, dass es möglich ist: eine Zeichenkette in ein Icon zu verwandeln. Dies erfordert eine Icon-Schriftart, und ich bevorzuge generell SVG für Icons, aber das hindert diesen Beitrag nicht daran, ein echtes CSS-Trick zu sein, das man definitiv kennen sollte!

Pseudo-Elemente (d. h. ::before und ::after) waren mir bei der Erstellung von Websites eine große Hilfe, daher entwickelte ich einen Ansatz, um sie neben Ligature-Icons zu verwenden, um lesbareren und wartbareren Code zu erstellen.

Ligature-Icons? Ja! So funktionieren Googles Material Icons.

Anstatt jedoch Text in HTML zu verwenden, können Sie ein Pseudo-Element verwenden. Das heißt, verwenden Sie die content-Eigenschaft in CSS, um die Zeichenkette in jedes Element einzufügen. Sagen Sie, Sie haben dieses HTML

<button data-icon="delete">Remove this item</button>

Wir können die Zeichenkette daran anhängen ("delete"), so:

[data-icon]::before {
  content: attr(data-icon);
}

Dann können wir, durch die Macht magischer Ligaturen, diesen Text in ein Icon verwandeln. Das geschieht automatisch, wenn die Schriftfamilie auf eine eingestellt ist, die Ligature-Icons unterstützt, wie z. B. Material Icons.

Zuerst müssen Sie diese Icon-Schriftart verfügbar haben

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Der vollständige CSS-Code für die Pseudo-Element-Icons sieht eher so aus:

[data-icon]::before {
  content: attr(data-icon);
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  * Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
   
  * Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Hinweis: Wir müssen die font-feature-settings-Eigenschaft verwenden, damit dies in Internet Explorer funktioniert.

Wie wäre es mit einer Liste, die einen ausgewählten Eintrag anzeigt?

<ul class="list">
  <li>One</li>
  <li data-icon="check">Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

Siehe den Pen Pen #01 von CSS-Tricks (@css-tricks) auf CodePen.

Sie könnten es auch zur Anzeige von Benutzerzuständen bei Integrationen oder Formularen verwenden.

<ul class="list">
  <li data-icon="error">Int One</li>
  <li data-icon="check">Int Two</li>
  <li data-icon="error">Int Three</li>
  <li data-icon="error">Int Four</li>
</ul>

Siehe den Pen Ligature Icons – Error Indicators von CSS-Tricks (@css-tricks) auf CodePen.

Beachten Sie, dass ich für alle bisherigen Beispiele keine zusätzlichen CSS- oder HTML-Elemente hinzugefügt habe, um die neuen Icons zu erhalten.

Hier ist ein Beispiel für einen Button mit einem :hover- und einem :active-Zustand. Ich habe ein weiteres Attribut hinzugefügt, um das Erfolgssymbol zu handhaben. Dies könnte mit JavaScript realisiert werden, aber da dies CSS-Tricks ist, habe ich mich für den reinen CSS-Ansatz entschieden.

Siehe den Pen Pen #03 von CSS-Tricks (@css-tricks) auf CodePen.