Ändern der Schriftgröße in tollen Symbolen für Schriftarten
Lesezeit: 5 Minuten
Jeffrey Cunningham
Ich verwende das Parallax Pro Genesis Child Theme, also arbeite ich in einem Widget-Bereich.
Ich bin mir nicht sicher, ob ich das richtig mache, aber ich habe versucht, unter einem tollen Symbol für Schriftarten zu schreiben, indem ich dies im Widget-Bereich getan habe:
<i class="fa fa-code fa-4x">Fully mobile responsive designs
that adjust to fit all platforms</i>
Es funktioniert, aber der Text ist riesig. Wie kann ich die Größe des Textes ändern? Ich habe versucht, die Schriftgröße im .fa-Code-Abschnitt im CSS-Ordner „Font Awesome“ zu ändern, aber es funktioniert nicht. Gibt es eine bessere Möglichkeit, unter meinem Symbol zu schreiben, oder sollte es so gemacht werden?
Vielen Dank!
Ok, ich bin zu dem Schluss gekommen, wie man am besten Text für tolle Font-Icons in einem Text-Widget-Bereich des Parallax Pro-Designs bearbeiten kann. Wenn Sie den Text wie oben gezeigt in die -Tags einfügen und versuchen, den Text in CSS mithilfe von .fa- oder .fa-Code anzusprechen, werden Sie nicht nur den Text ansprechen, sondern das gesamte Symbol. Daher müssen Sie ein separates Element innerhalb des fantastischen Font-Symbols erstellen, indem Sie Ihren Text in
-Tags einschließen. Dann können Sie .fa p {text-size 20px;} verwenden oder genauer gesagt .fa-(was auch immer Sie für ein Symbol verwenden) p {text-size 20px;}
– Jeffrey Cunningham
10. Juni 2015 um 4:12 Uhr
Yeldar Kurmangalijew
Tatsächlich sind Font-awesome-Icons Textsymbole. Es bedeutet, dass seine Größe von beeinflusst wird font-size Eigentum.
fa Die CSS-Klasse steht für Font-awesome Font and General Styles. fa-code CSS-Klasse steht für ein bestimmtes Symbol. fa-4x CSS-Klasse steht für „font-size: 4em;“
Das bedeutet, dass, wenn Sie Ihren Text in die FA-Spanne aufnehmen, der gesamte Text um das Vierfache erhöht wird. Es sollte KEINEN Text enthalten <i> Tag in deinem Beispiel.
<i class="fa fa-code fa-4x"></i>
Fully mobile responsive designs that adjust to fit all platforms
Jetzt können Sie den Text außerhalb Ihres bearbeiten i taggen wie gewohnt.
Siehe unten Arbeitsbeispiel:
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row text-center">
<i class="fa fa-code fa-4x"></i>
</div>
<div class="row text-center">
<span class="red-text-for-example">Fully mobile responsive designs that adjust to fit all platforms</span>
</div>
Außerdem sollten Sie nicht wechseln font-awesome.css Datei.
Es bietet Ihnen viele praktische Möglichkeiten zur Steuerung von Größen, Schriftarten, Farben usw.
Wenn Sie mit der Größe eines FA-Symbols manipulieren möchten, ändern Sie es fa-4x Klasse zu fa-3x, fa-2x usw. (oder entfernen Sie es überhaupt, wenn Sie möchten, dass das FA-Symbol die gleiche Größe wie Ihr Text hat).
Danke vielmals! Dies ist wahrscheinlich der beste Weg, damit der Text nicht im fantastischen Stil der Schriftart gebunden wird.
– Jeffrey Cunningham
9. Juni 2015 um 1:24 Uhr
@JeffreyCunningham Sie könnten diese Antwort als richtig markieren, damit sie nicht mehr in der Liste der unbeantworteten Fragen angezeigt wird. Dadurch wird verhindert, dass neue Antworten (z. B. die neueste) zufällig hinzugefügt werden.
– Herr Lister
10. November 2016 um 19:32 Uhr
im CSS-Selektor:
font-size: 4em;
Wenn Sie eine Frage beantworten möchten, fügen Sie bitte detailliertere Informationen hinzu: stackoverflow.com/help/how-to-answer
– Jordanien
8. Juni 2015 um 10:28 Uhr
Vielen Dank für Ihre Hilfe, aber das funktioniert nicht. Ich habe Folgendes in meine Haupt-CSS-Datei eingefügt: .fa-code { margin-left: 75px; Rand rechts: 75px; Schriftgröße: 100px; Der Randcode macht genau das, was ich will, aber die Textgröße ändert sich nicht. Irgendeine Idee warum?
– Jeffrey Cunningham
9. Juni 2015 um 2:11 Uhr
Jordanien
Lösung:
Fügen Sie einfach mit Ihrem Haupt-Stylesheet hinzu:
.fa-code {
font-size: 20px;
}
Das Obige zielt nur auf das Font Awesome Code-Symbol ab. Wenn Sie auf alle Symbole abzielen möchten, verwenden Sie einfach:
.fa {
font-size: 20px;
}
Alternativ können Sie einen Inline-Stil hinzufügen, dies wird nicht als bewährte Methode angesehen, aber ich dachte, ich würde beide Möglichkeiten erklären.
<i class="fa fa-code" style="font-size: 20px;">Fully mobile responsive designs that adjust to fit all platforms</i>
ich benutzte 20px als Beispiel, aber ändern Sie einfach den Wert nach Ihren Bedürfnissen. Hoffe das hilft!
Ich bin mir nicht sicher, ob es das ist, was die Leute “nicht als gute Praxis ansehen”. Du beschreibst eine i Tag mit Klasse fa-4x was “Schriftgröße: 4em;” bedeutet. Dann beschreiben Sie den Inline-Stil “font-size: 20px;” die die FA-CSS-Klasse überschreibt.
– Yeldar Kurmangalijew
8. Juni 2015 um 4:31 Uhr
Die Verwendung von Inline-Stilen wird als schlechte Übung angesehen. Ich bin mir nicht sicher, was Sie sagen wollen …
– Jordanien
8. Juni 2015 um 4:33 Uhr
Ich habe versucht zu sagen, dass Sie eine ‘Fa-4x’-Klasse für einen beschrieben haben i. Sie haben es bearbeitet. Jetzt sieht es besser aus.
– Yeldar Kurmangalijew
8. Juni 2015 um 4:38 Uhr
Ja, ich war mitten in der Bearbeitung, als du kommentiert hast.
– Jordanien
8. Juni 2015 um 4:40 Uhr
Eigentlich funktioniert das nicht. Ich habe den Text innerhalb der -Tags platziert und den folgenden Code in meiner Haupt-CSS-Datei erstellt: .fa-code { margin-left: 75px; Rand rechts: 75px; Schriftgröße: 100px; Der Randcode funktioniert, aber die Größe des Textes ändert sich nicht.
Ok, ich bin zu dem Schluss gekommen, wie man am besten Text für tolle Font-Icons in einem Text-Widget-Bereich des Parallax Pro-Designs bearbeiten kann. Wenn Sie den Text wie oben gezeigt in die -Tags einfügen und versuchen, den Text in CSS mithilfe von .fa- oder .fa-Code anzusprechen, werden Sie nicht nur den Text ansprechen, sondern das gesamte Symbol. Daher müssen Sie ein separates Element innerhalb des fantastischen Font-Symbols erstellen, indem Sie Ihren Text in
-Tags einschließen. Dann können Sie .fa p {text-size 20px;} verwenden oder genauer gesagt .fa-(was auch immer Sie für ein Symbol verwenden) p {text-size 20px;}
– Jeffrey Cunningham
10. Juni 2015 um 4:12 Uhr