Schriftgröße der FontAwesome-Symbole ändern?

Ich möchte eines der FontAwesome-Symbole etwas weniger schwer machen - es ist viel schwerer als die von mir verwendete Schriftart. So sieht es derzeit aus:

::

Hässlich, richtig? Also habe ich versucht, die Schriftgröße wie folgt zurückzusetzen:

.tag .icon-remove  { 
  font-weight: 100;
}

Das Attribut scheint im CSS korrekt eingestellt zu sein, hat jedoch keine Auswirkung - das Symbol sieht genauso schwer aus wie zuvor. Ich habe es auch versucht font-weight: lighterund -webkit-text-stroke-width: 1pxohne Wirkung.

Kann ich das Symbol auf irgendeine Weise weniger schwer machen? In den Dokumenten heißt es: " Alles, was Sie mit CSS-Schriftstilen tun können, können Sie mit Font Awesome tun ", aber ich kann nicht herausfinden, wie das geht.

Update 2018

Font Awesome 5 bietet jetzt leichte , regelmäßige und solide Varianten. Das in dieser Frage gezeigte Symbol hat unter den verschiedenen Varianten den folgenden Stil:

Eine moderne Antwort auf diese Frage wäre, dass verschiedene Varianten des Symbols verwendet werden können, um das Symbol mutiger oder heller erscheinen zu lassen. Der einzige Nachteil ist, dass Sie, wenn Sie bereits Solid verwenden , auf die ursprünglichen Antworten hier zurückgreifen müssen, um diese mutiger zu machen. Wenn Sie Licht verwenden, müssen Sie dasselbe tun, um diese leichter zu machen.

In der Dokumentation zu Font Awesome wird die Verwendung dieser Varianten beschrieben.

Ursprüngliche Antwort

Font Awesome nutzt die Unicode-Region für den privaten Gebrauch . Das, was .icon-removeSie verwenden, wird beispielsweise mithilfe des ::beforePseudo-Selektors hinzugefügt , dessen Inhalt auf \ f00d ( ) gesetzt wird:

.icon-remove:before {
    content: "\f00d";
}

Font Awesome wird nur mit einer Variante mit Schriftgröße geliefert. Browser rendern dies jedoch so, als würden sie jede Schriftart mit nur einer Variante rendern. Wenn Sie genau hinschauen, ist die normalSchriftgröße nicht so fett wie die boldSchriftgröße. Leider ist eine normale Schriftgröße nicht das, wonach Sie suchen.

Sie können jedoch die Farbe in etwas weniger Dunkles ändern und die Schriftgröße reduzieren, um sie etwas weniger hervorzuheben. In Ihrem Bild erscheint der Text "Tags" viel heller als das Symbol. Ich würde daher empfehlen, Folgendes zu verwenden:

.tag .icon-remove {
    color:#888;
    font-size:14px;
}

Hier ist ein JSFiddle-Beispiel , und hier ist ein weiterer Beweis dafür, dass dies definitiv eine Schriftart ist.

Webkit-Browser unterstützen die Möglichkeit, Schriftarten "Striche" hinzuzufügen. Durch diesen Stil wirken Schriftarten dünner (unter der Annahme eines weißen Hintergrunds):

-webkit-text-stroke: 2px white;

Beispiel für Codepen hier: http://codepen.io/mackdoyle/pen/yrgEH Einige Benutzer verwenden SVG für eine plattformübergreifende "Strich" -Lösung: http://codepen.io/CrocoDillon/pen/dGIsK

Nur um jedem zu helfen, der auf diese Seite kommt. Dies ist eine Alternative, wenn Sie flexibel mit einer anderen Symbolbibliothek umgehen können.

James hat Recht, dass Sie die Schriftgröße nicht ändern können. Wenn Sie jedoch nach einem moderneren Look für Symbole suchen, sollten Sie Ionicons in Betracht ziehen

Es hat sowohl iOS- als auch Android-Versionen für Symbole.

Der Autor scheint einen Freemium-Ansatz für die Schriftbibliothek gewählt zu haben und stellt Black Tie zur Verfügung, um der Font-Awesome-Bibliothek unterschiedliche Gewichte zu geben.

Eine andere Lösung, die ich verwendet habe, um hellere Schriftarten-Symbole zu erstellen, die dem webkit-text-strokeAnsatz ähneln, aber portabler sind, besteht darin, die Farbe des Symbols auf den Hintergrund (oder transparent) einzustellen und mit Textschatten einen Umriss zu erstellen:

.fa-outline-dark-gray {
    color: #fff;
    text-shadow: -1px -1px 0 #999,
            1px -1px 0 #999,
           -1px 1px 0 #999,
            1px 1px 0 #999;
}

Es funktioniert nicht in dh <10, aber zumindest ist es nicht auf Webkit-Browser beschränkt.

.star-light::after {
    content: "\f005";
    font-family: "FontAwesome";
    font-size: 3.2rem;
    color: #fff;
    font-weight: 900;
    background-color: red;
}