Ich baue eine Website und möchte visuell eine Reihe von tollen Schriften haben, die die gleiche Höhe haben. Dies bedeutet auch, dass ich möchte, dass sie alle auf der gleichen Grundlinie sitzen.
Da die Symbole unterschiedliche Formen mit unterschiedlichen Seitenverhältnissen haben, wenn Sie font awesome Symbole mit der gleichen Schriftgröße oder fa-2x (usw.) auf derselben Zeile platzieren, werden ihre Höhen und Grundlinien nicht ausgerichtet horizontal. In der Tat, ich habe bemerkt, dass es nicht viel Standard für wie die Symbole nebeneinander in einer Reihe nebeneinander sitzen scheint. Einige sitzen über der Grundlinie in zufälligen Höhen. Auch bei derselben Größe oder Schriftgröße können die Symbole visuell in ihrer Größe optisch unterschiedlich aussehen. Zum Beispiel das Mobiltelefon-Symbol im Vergleich zum Mikrofon.
Das seltsame an dem Handy-Symbol ist, wie es über der Grundlinie schwebt, weil es scheint, eine eingebaute Polsterung zu haben, die ich finde, keine Möglichkeit zu finden, zu überschreiben. Die Verwendung von vertical-align: baseline usw. hilft nicht.
Hier ist der HTML-Code:
%Vor%Das CSS:
%Vor%Wer weiß schon, wie man meine font awesome Icons an CSS anpassen kann, so dass sie optisch genau gleich hoch erscheinen, wenn sie nebeneinander platziert werden?
Einige der Glyphen-Größe und -Zentren unterscheiden sich von der Mehrheit ( Ссылка ) wie Sie habe dich gefunden. Es könnte sich lohnen, eine erneute Überprüfung beim FA-Team zu beantragen.
Ich könnte die Icons in Ihrem Layout jedoch ausrichten, indem Sie einige CSS-Einstellungen verwenden, um speziell das "Handy-Handy" zu kompensieren. Ich habe allen Icons "fa-2x" hinzugefügt und zusätzlich das folgende "fa-mobile-phone":
%Vor%Danach scheinen alle Symbole vertikal ausgerichtet zu sein und alle scheinen die gleiche Höhe zu haben. Möglicherweise möchten Sie ähnliche Anpassungen in Ihrem Layout vornehmen.
Tags und Links height icons font-awesome