Schriftgröße der FontAwesome-Symbole ändern?

75

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:

schweres Entfernungssymbol neben leichter Schrift::

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.

Richard
quelle
3
TL; DR: Nein, kannst du nicht.
Ben
1
Sie können content: "×";mit Verdana Schriftart zum Beispiel verwenden
Taras

Antworten:

60

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:

fa-times Varianten

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.

James Donnelly
quelle
5
@JamesDonnelly geht nicht nur auf das vorliegende Problem ein, sondern bietet auch eine Lösung an, die sich direkt mit der Endabsicht des Benutzers befasst. Danke für die tolle Antwort!
ThinkBonobo
1
Mit anderen Worten, Sie müssen für Pro Icon bezahlen;)
Marwen Trabelsi
Wir können dies nicht verwenden, um native zu reagieren, oder? Ich versuche hier die Dicke der Übergröße zu reduzieren. Könnten Sie sich das ansehen? Snack.expo.io/@lindapaiste/022490
Jnl
109

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

user3303554
quelle
1
Wenn Sie eine weiße Schrift haben, ändern Sie die obigen Angaben -webkit-text-stroke: 2px black;in:, um den Effekt zu sehen. Genial;)
Kai Noack
funktioniert nicht in IE11. in allen anderen Browsern - funktioniert.
Oleg Abrazhaev
Wir können dies nicht verwenden, um native zu reagieren, oder? Ich versuche hier die Dicke der Übergröße zu reduzieren. Könnten Sie sich das ansehen? Snack.expo.io/@lindapaiste/022490
Jnl
27

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.

Abhi
quelle
9
Frage ist über FontAwesome nicht ionicons
Chris
22
Ja, ich weiß - dies ist eine Alternative, wenn jemand die Flexibilität hat.
Abhi
7

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.

Matthew Steeples
quelle
6

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.

MBrizzle
quelle
Ich habe eine ganze Reihe von Symbolen auf einer Seite ausgegeben und habe gerade diese Technik angewendet. Es ist insgesamt nicht schlecht, es wird schwierig mit kombinierten / gestapelten Schriftsymbolen und kolorierten Dingen. Wenn der Anwendungsfall jedoch einfach genug wäre, würde dies den Hub erleichtern.
Danjah
Wir können dies nicht verwenden, um native zu reagieren, oder? Ich versuche hier die Dicke der Übergröße zu reduzieren. Könnten Sie sich das ansehen? Snack.expo.io/@lindapaiste/022490
Jnl
1
.star-light::after {
    content: "\f005";
    font-family: "FontAwesome";
    font-size: 3.2rem;
    color: #fff;
    font-weight: 900;
    background-color: red;
}
Özay Akbaş
quelle
Wir können dies nicht verwenden, um native zu reagieren, oder? Ich versuche hier die Dicke der Übergröße zu reduzieren. Könnten Sie sich das ansehen? Snack.expo.io/@lindapaiste/022490
Jnl