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: lighter
und -webkit-text-stroke-width: 1px
ohne 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.
css
twitter-bootstrap
font-awesome
Richard
quelle
quelle
content: "×";
mit Verdana Schriftart zum Beispiel verwendenAntworten:
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-remove
Sie verwenden, wird beispielsweise mithilfe des::before
Pseudo-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
normal
Schriftgröße nicht so fett wie diebold
Schriftgröß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.
quelle
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
quelle
-webkit-text-stroke: 2px black;
in:, um den Effekt zu sehen. Genial;)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.
quelle
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.
quelle
Eine andere Lösung, die ich verwendet habe, um hellere Schriftarten-Symbole zu erstellen, die dem
webkit-text-stroke
Ansatz ä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.
quelle
.star-light::after { content: "\f005"; font-family: "FontAwesome"; font-size: 3.2rem; color: #fff; font-weight: 900; background-color: red; }
quelle