[userChrome.css] Font Awesome Free: Aus einem riesigen Set an hochwertigen Icons auswählen und sie elegant als Zeichen (statt als Image) verwenden

Moin.

Ich war unzufrieden mit Mozillas Methodik in Thunderbird Icons zu realisieren.

Es reizte mich, eine Methode anzuwenden, wie sie auf modernen Websites üblich ist: einen sog. Icon-Font einbetten.

Icons können dann als Entity oder Glyphe eingefügt werden.
Mühelos können dann typische CSS-Text-Eigenschaften wie Schriftgröße, Farbe, Abstände, Schriftgewicht etc. auf das "Icon" angewendet werden.
Es verhält sich wie ein gewöhnliches Unicodezeichen.

Ich verwende auf Websites schon länger den frei nutzbaren Font "Font Awesome Free". Er enthält aktuell 1400 Icons.

Wie man dies auf Websites verwendet, habe ich ausführlich in einem Codepen beschrieben.

Nun habe ich das Ganze in userChrome.css ausprobiert. Funktioniert prima.

Anleitung

1. Download "Free for Desktop"
2. Entpacken
3. Zu den Schriften des Betriebssystems hinzufügen
4. Beispielhafte Nutzung: Das Büroklammersymbol für Anhänge durch ein anderes Symbol ersetzen

/* Spalte "Anhang" Spaltenüberschrift: Büroklammersymbol durch ein anderes ersetzen */ 
#threadTree th#attachmentCol button {
  visibility: hidden !important;
}
#threadTree th#attachmentCol button img {
  display: none !important;
}
#threadTree th#attachmentCol button::before {
  visibility: visible !important;
  font-family: "Font Awesome 7 Free" !important;
  font-weight: bold !important;
  content: "\f0c6" /* fa-solid-paperclip */ !important;
}
/* Spalte "Anhang" Spalteninhalt: Büroklammersymbol durch ein anderes ersetzen */ 
#threadTree td.attachmentcol-column img{ 
  display: none !important;
}
#threadTree tr[data-properties~="attach"] td.attachmentcol-column::before{
  font-family: "Font Awesome 7 Free" !important;
  font-weight: bold !important;
  content: "\f0c6" /* fa-solid-paperclip */ !important;
}

Was ich nicht rausbekommen konnte: warum man in userChrome.css nicht die Glyphe statt des Entities verwenden kann.