So können Sie Ihre Fontawesome-Symbole kippen, skalieren, fett formatieren und ansonsten formatieren

Ihre App verwendet also einige Fontawesome-Symbole, die jedoch genau wie die der anderen Apps aussehen. Sie benötigen etwas Benutzerdefinierteres. Ich saß im selben Boot und verbrachte einige Zeit damit, meinen eigenen Look zu entwickeln. Hier sind einige Methoden, die ich gefunden habe, um Symbole zu spiegeln, zu drehen, zu skalieren, zu fetten, zu skalieren, einzufärben und sie auf andere Weise an Ihre Fontawesome-Symbole anzupassen. Einige Klassen werden von Fontawesome unterstützt, andere sind CSS.

Flip

Fontawesome hat zwei Klassen integriert, um die allgemeinen Anforderungen an das Umblättern zu erfüllen:

fa-flip- * (Optionen: horizontal, vertikal)
 
 

Drehen

Gleiches gilt für die Drehrichtung und die Hauptrichtung:

fa-rotate- * (Optionen: 90, 180, 270)
 
 
 

Größer

In Fontawesome haben Sie auch erfahren, ob Sie Ihre Symbole skalieren möchten, um sie zu vergrößern. Fügen Sie einfach unterstützte Klassen für große, 2x, 3x, 4x und 5x der Standardgröße hinzu:

fa- * (Optionen: lg, 2x, 3x, 4x, 5x)
  fa-lg
  fa-2x
  fa-3x
  fa-4x
  fa-5x

Kleiner

Aber was ist, wenn Sie Ihre Symbole verkleinern müssen, um sie an Ihr Layout, ein Formular oder eine Überlagerung mit anderen Symbolen anzupassen? Fontawesome bietet hierfür keine Kurse an. Da die Symbole jedoch als Schriftart angezeigt werden, können Sie jedes CSS hinzufügen, das Sie normalerweise zum Skalieren einer Schriftart zum Skalieren des Symbols verwenden würden:

Erstellen Sie einfach eine CSS-Klasse (mit dem Grad der Spezifität, den Sie benötigen, um das Symbol / den Link zu erfassen) und richten Sie diese auf den Selektor des Symbols:

.fa-Suche {
  Schriftgröße: 0.5em;
}
 

Fontawesome kümmert sich zu Recht sehr um die Zugänglichkeit. Ich vermute, dass weniger als die Standardgröße für einige Benutzer Probleme verursachen kann und nur für nicht unbedingt erforderliche Designelemente und nicht für kritische UX verwendet werden sollte.

Farbe

Verwenden Sie einfach benutzerdefiniertes CSS für die Klasse, und schon kann es losgehen. Hier wenden wir als Beispiel sowohl eine Schriftgröße als auch eine Farbe auf ein horizontal gespiegeltes Symbol an:

.fa-Suche {
  Schriftgröße: 3.0em;
  Farbe blau;
}
 

Sie können natürlich die üblichen Hover-Effekte anwenden, um beim Hover eine Farbänderung und -skalierung zu erzielen, damit Ihre Symbole platzen.

Fett / Leicht

Dies ist der Punkt, an dem wir von der Straße abkommen. Bisher haben wir (1) die von Fontawesome bereitgestellten Klassen (2) Standard-Schriftstile aus CSS verwendet. Jetzt werden wir einige der weniger browserkompatiblen Schriftarteneffekte verwenden, um zusätzliche Anpassungen vorzunehmen. Tatsächlich ist dies ab Juli 2016 die Kompatibilitätstabelle für die folgenden Stile, die alle -webkit-text-stroke verwenden:

Keine Überraschung, kein IE. Nun weiter so!

Fontawesome hat keine kühne Klasse. Und Sie würden nicht glauben, dass Sie es brauchen würden. Aber ich wollte die Strichstärke einiger Symbole mit unterschiedlichen Strichen anpassen, damit sie etwas besser koordiniert werden. Möglicherweise möchten Sie dies auch tun, um angrenzenden Text zu koordinieren, der einen dickeren oder dünneren Strich aufweist als Ihr Fontawesome-Symbol.

Oben wird ein Hintergrundfarbstrich angewendet, um das Symbol zu dünn zu machen, oder ein Schriftfarbstrich, um das Symbol zu dick zu machen.

.fa-Suche {
  -Webkit-Text-Strich: 2px weiß; /* Hintergrundfarbe */
  Farbe blau;
}
.fa-Suche {
  -webkit-text-stroke: 3px blue; /* Schriftfarbe */
  Farbe blau;
}

Gliederung

Sie können sogar Strich und Füllung kombinieren, um eine Kontur oder einen zweifarbigen Effekt zu erzielen:

.fa-Suche {
  -webkit-text-stroke: 2px blue;
  -webkit-text-fill-color: cyan;
}

Denken Sie daran, dass dies nicht zu einer browserübergreifenden Kompatibilität führt. (Ich habe erfahren, dass Sie mit Textschatten im IE experimentieren können, um Ihre gesamte App auf den neuesten Stand zu bringen.)

Das ist es!

Mithilfe der in Fontawesome integrierten Klassen und Ihres eigenen benutzerdefinierten CSS können Sie Ihre Symbole zum Platzieren bringen.