So stylen Sie die Farbe, Größe und den Schatten von Symbolen von Font Awesome Icons

Antworten:

466

Da es sich lediglich um Schriftarten handelt, sollten Sie sie als Schriftarten gestalten können:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}
David sagt, Monica wieder einsetzen
quelle
4
@ David Thomas: Das ist eine gute Lösung. Vielen Dank für die Veröffentlichung. Ich bin jedoch immer noch verblüfft, warum font-awesome manchmal Symbole in Weiß und manchmal in Schwarz anzeigt. WAS IST DER TRICK? Wie GirlCanCode2 hervorhob, zeigen die Beispiele auf der FA-Website sowohl schwarze als auch weiße Symbole und Text. . . Wenn Sie die Elemente in Firebug untersuchen, wird das CSS für bestimmte Symbole (z. B. Symbolinformationen) [über] weiß geschrieben. Müssen wir das wirklich tun? Keine symbolweiße Option wie in bootstrap.css?
Ass
1
Um
@Ace Ich weiß, dass dies alt ist und Sie haben dies vielleicht schon gelernt, aber auch für andere, die die Frage haben, ob Sie hier und auch hier die Spezifität untersuchen möchten . Das andere, was Sie wissen sollten, ist die CSS-Kaskade. Beispielsweise werden Stile und Stylesheets, die nach anderen kommen, stattdessen angewendet, es sei denn, ihre Stilregelselektoren sind weniger spezifisch (wie in der Spezifität). Meine Lieblingspraxis ist es also, zumindest die Spezifität anzupassen und den Stil danach zu setzen, um sie zu überschreiben.
John
158

Sie können den Stil auch einfach inline hinzufügen:

<i class="icon-ok-sign" style="color:green"></i>

<i class="icon-warning-sign" style="color:red"></i>
Schuppen
quelle
7
Trotz der Abstimmungen der Elitisten funktioniert diese Antwort einwandfrei. Da font awesome eine Schrift ist, reagiert sie auf Stile und Klassen, die sich auf Text auswirken.
AaronLS
16
@NightOwl Es wird auch empfohlen, diese Ressourcen zu minimieren, zu bündeln und zwischenzuspeichern. Keine der Antworten hier zeigt eines dieser Dinge, und der Versuch, Best Practices durchzusetzen, die im Kontext einer isolierten Antwort befolgt werden, ist eine elitäre IMO. Jeder, der CSS versteht, sollte in der Lage sein, diesen Stil in eine CSS-Klasse zu verschieben.
AaronLS
4
@NightOwl Selbst die am höchsten bewertete Antwort ist in Bezug auf Best Practices ziemlich schrecklich. Sie sollten keine Stile in freigegebenen CSS-Dateien erstellen, die auf Elemente mit #id verweisen, da nur ein Element diesen Stil auf jeder Seite abonnieren kann. Wenn ich es aus diesem Grund ablehnen würde, wäre ich dann nicht ziemlich elitär? Beide Antwortenden haben sich effektiv bemüht, dem Fragesteller nützliche Informationen zur Verfügung zu stellen, und ich denke nicht, dass sie herabgestuft werden sollten, wenn ihre Antwort tatsächlich effektiv ist.
AaronLS
31
Wenn jemand die Antwort mit einem Kommentar ergänzen möchte, der angibt, dass es im Allgemeinen die beste Vorgehensweise ist, keine Inline-Stile zu verwenden, ist dies angemessen. Eine effektive und informative Antwort sollte nicht über solche Kleinigkeiten herabgestuft werden, wenn jemand einfach den vorhandenen Wert der Antwort durch Hinzufügen eines Kommentars hätte verbessern können.
AaronLS
1
Für mich macht es keinen Sinn, eine einfache Farb-CSS-Direktive in eine eigene Klasse zu stellen und sie mit Ihren CSS-Assets zu bündeln. Was wirst du machen? class='icon-ok-sign my-red-class'? oder class='icon-ok-sign-red'? Das macht es weniger lesbar und fügt eine nutzlose Komplexität hinzu.
Nurettin
114

Wenn Sie Bootstrap gleichzeitig verwenden, können Sie Folgendes verwenden:

<i class="fa fa-check-circle-o fa-5x text-success" ></i>

Andernfalls:

<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>
Qian Chen
quelle
1
Sicherlich beinhaltet die Lösung der Frage nicht die Verwendung von Bootstrap
JG Estiot
1
Möglicherweise ist kein Bootstrap erforderlich, aber so habe ich diese Frage gefunden. Danke Elgs!
Will Lovett
1
Sie können dem Screenshot entnehmen, dass sie bereits Bootstrap verwenden. Es wäre sinnvoll, es weiterhin zu verwenden, um dieselbe Farbpalette beizubehalten und keinen Code zu duplizieren.
Simon Luijk
subtil aber wichtig: Der Texterfolg ist die Textfarbe, nicht die Farbe der Tastenfläche für den BTN-Erfolg. Wenn Sie also möchten, dass ein Symbol wie eine "flache Schaltfläche" aussieht, ist der Texterfolg etwas anders. Ich finde, dass dies in der
Textwarnung
44

Es sieht so aus, als würde die Farbe des FontAwesome-Symbols auf Textinformationen, Textfehler usw. reagieren.

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>
user1695595
quelle
8
Für Bootstrap, <i class = "fa fa-Warnung Text-Gefahr"> </ i>
Mastro
Dies ist wahrscheinlich die beste Antwort auf dieser Seite, zumindest für mich, da ich bereits Bootstrap verwende und dies zu diesem Paradigma passt.
Jake Toronto
17

inyour.css Datei:

    *.icon-white {color: white}
    *.icon-silver {color: silver}

inyour.html Datei:

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>
Gingin
quelle
13

Es gibt eine wirklich einfache Möglichkeit, die Farbe von Font Awesome-Symbolen zu ändern. 

<!-- Font Awesome insert code -->
<script src="https://use.fontawesome.com/49b98aaeb5.js"></script>
<!-- End -->
<i class="fa fa-thumbs-up fa-5x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-4x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-3x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-2x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up" aria-hidden="true" style="color:#00cc6a"></i>
Erweitern Sie das Snippet

Sie können den Hex-Code nach Ihren Wünschen ändern. HINWEIS: Die Textfarbe ändert auch die Symbolfarbe, es sei denn, style="color:#00cc6a"das iTag enthält eine.

Calum Childs
quelle
9

Mit FA 4.4.0 hinzufügen

.text-danger
    color: #d9534f

zum Dokument CSS und dann mit 

 <i class="fa fa-ban text-danger"></i>

ändert die Farbe in rot. Sie können Ihre eigene Farbe einstellen.

Steve Gutierrez
quelle
9 
For Size : fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.

For Color : <i class="fa fa-link fa-lg" aria-hidden="true"style="color:indianred"></i>

For Shadow : .fa-linkedin-square{text-shadow: 3px 6px #272634;}
arif imtiaz
quelle
8

http://fortawesome.github.io/Font-Awesome/examples/

<i class="icon-thumbs-up icon-3x main-color"></i>

Hier habe ich in meinem CSS einen globalen Stil definiert, bei dem die Hauptfarbe eine Klasse ist, in meinem Fall ein hellblauer Farbton. Ich finde, dass die Verwendung von Inline-Stilen auf Symbolen mit Font Awesome gut funktioniert, insbesondere wenn Sie Ihre Farben semantisch benennen, dh nav-color, wenn Sie dafür eine separate Farbe wünschen usw.

In diesem Beispiel auf ihrer Website und wie ich auch in meinem Beispiel geschrieben habe, hat die neueste Version von Font Awesome die Syntax zum Anpassen der Größe geringfügig geändert. Früher war dies:

icon-xxlarge

wo muss ich jetzt verwenden:

icon-3x

Dies hängt natürlich alles davon ab, welche Version von Font Awesome Sie in Ihrer Umgebung installiert haben. Hoffe das hilft.

kinghenry14
quelle
7

In FontAwesome 4.0 ändern sich die Klassen in 'fa-2x', 'fa-3x'.

Angelokh
quelle
7

Sie können einfach eine Klasse in Ihrer CSS-Datei definieren und sie wie in eine HTML-Datei kaskadieren 

<i class="fa fa-plus fa-lg green"></i>

Schreiben Sie jetzt in CSS 

.green{ color:green}
gdmanandamohon
quelle
6

Zielen Sie einfach auf den vordefinierten Klassennamen "font-awesome"

in ex:

HTML

<i class="fa fa-facebook"></i>

CSS

i.fa {
    color: red;
    font-size: 30px;
}
Jonca33
quelle
5

Bitte beziehen Sie sich auf den Link http://www.w3schools.com/icons/fontawesome_icons_intro.asp

<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>

<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
Brandon Yang
quelle
4

Ich hatte das gleiche Problem, als ich versuchte, die Symbole direkt von BootstrapCDN aus zu verwenden (der einfachste Weg). Dann lud ich die CSS-Datei herunter und kopierte sie in den CSS-Ordner meiner Site, die CSS-Datei (beschrieben unter "einfach" in der Dokumentation zu fantastischen Schriftarten), und alles begann so zu funktionieren, wie es sollte.

Thanushka
quelle
3

Wickeln Sie das i-Tag in p oder span ein, dann können Sie die Bootstrap-CSS-Klasse verwenden

<p class="text-success"><i class="fa fa-check"></i></p>
etlds
quelle
2

Verwenden Sie für die Font Awesome 5 SVG- Version

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
czLukasss
quelle
1

Wie bereits erwähnt, handelt es sich bei fantastischen Symbolen für Schriftarten um Text. Folglich gestalten Sie ihn mit den entsprechenden CSS-Attributen. Zum Beispiel:

.fa-twitter-square {
    font-size: 15px;
    color: red;
}

Wenn sich die Symbolgröße, wie es mir ziemlich häufig passiert, überhaupt nicht ändert, fügen Sie dem Attribut "Schriftgröße" "! Important" hinzu.

.fa-twitter-square {
    font-size: 15px !important;
    color: red;
}
gmartinss
quelle
1

Zur Größenbestimmung von Symbolen

Sowohl unsere Web Fonts + CSS- als auch SVG + JS-Frameworks enthalten einige grundlegende Steuerelemente für die Größenanpassung von Symbolen im Kontext der Benutzeroberfläche Ihrer Seite.

Sie können wie verwenden

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

TarangP
quelle
0

Ändern Sie dynamisch die CSS-Eigenschaften von .fa-xxx-Symbolen:

<li class="nws">
<a href="#NewsModal" class="urgent" title="' + title + '" onclick=""><span class="label label-icon label-danger"><i class="fa fa-bolt"></i></span>' 
</a>
</li>
<script>
  $(document).ready(function(){
   $('li.nws').on("focusin", function(){
    $('.fa-bolt').addClass('lightning');
   });
 });
</script>

<style>
.lightning{ /*do something cool like shutter*/}
</style>
yardpenalty.com
quelle
0 
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
Dan Alboteanu
quelle
0

Ich würde Ihnen nicht raten, ein eingebautes, font-tolles Styling wie das fa-5x usw. zu verwenden. Aus Angst, sie könnten es ändern, und Sie müssten Ihren Anwendungscode ständig ändern, um den neuesten Standard zu erfüllen. Sie vermeiden dies einfach, indem Sie jeder Klasse, die Sie einheitlich gestalten möchten, dieselbe Klasse geben: Sagen Sie:

<i class="fa fa-facebook-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-google-plus-square fa-sabi-social-icons" aria-hidden="true"></i>

Hier ist die Klasse fa-sabi-social-icons

Dann können Sie in Ihrem CSS die Schriftarten mit denselben CSS-Regeln formatieren, mit denen Sie eine normale Schriftart formatieren würden. z.B

.fa-sabi-social-icons {
     color: //your color;
     font-size: // your font-size in px, em or %;
     text-shadow: 2px 2px #FF0000;
}

Damit sollten Ihre Schriften fantastisch gestaltet werden

kboul
quelle