it-swarm.dev

So gestalten Sie die Farbe, Größe und den Schatten der Symbolik von Font Awesome Icons

Wie kann ich die Farbe, Größe und den Schatten von Symbolen aus Font Awesome Icons gestalten?

Zum Beispiel werden in Font Awesome site einige Symbole in Weiß und einige in Rot angezeigt, die CSS wird jedoch nicht angezeigt, um sie so zu gestalten.

enter image description here

310
Elias7

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

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}
421
David Thomas

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

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

<i class="icon-warning-sign" style="color:red"></i>
133
dandrews

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>
94
Elgs Qian Chen

Sieht 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>
42
user1695595

in Ihrer.css-Datei:

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

in Ihrer.html-Datei:

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>
17
gingin

Es gibt eine wirklich einfache Möglichkeit, die Farbe der Font Awesome-Symbole 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>

Sie können den Hex-Code nach Ihren Wünschen ändern. HINWEIS: Die Textfarbe ändert auch die Symbolfarbe, es sei denn, im i-Tag ist ein style="color:#00cc6a" enthalten.

10
Calum Childs

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, in dem main-color eine Klasse ist, in meinem Fall ist dies ein hellblauer Farbton. Ich finde, dass die Verwendung von Inline-Styles für Icons mit Font Awesome gut funktioniert, vor allem wenn Sie Ihre Farben semantisch benennen, d.

In diesem Beispiel auf ihrer Website und wie ich auch in meinem Beispiel geschrieben habe, hat die neueste Version von Font Awesome die Syntax geringfügig geändert, indem die Größe angepasst wurde. Vorher war es:

icon-xxlarge

wo muss ich jetzt verwenden:

icon-3x

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

8
kinghenry14

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 für jede Farbe eine eigene Einstellung vornehmen.

8
Steve Gutierrez

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

7
angelokh

Sie können einfach eine Klasse in Ihrer CSS-Datei definieren und diese in eine HTML-Datei einfügen 

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

jetzt in css aufschreiben 

.green{ color:green}
6
gdmanandamohon

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>
5
Brandon Yang

Richten Sie einfach den vordefinierten Klassennamen in Schriftform an 

in ex:

HTML

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

CSS

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

Für Größe: fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.

Für Farbe: <i class="fa fa-link fa-lg" aria- hidden="true"style="color:indianred"></i> Für Schatten: .fa-linkedin-square { Text-Schatten: 3px 6px # 272634; } ``

4
arif imtiaz

Ich hatte das gleiche Problem, als ich versuchte, die Icons direkt von BootstrapCDN zu verwenden (der einfachste Weg). Dann lud ich die CSS-Datei herunter und kopierte sie in die CSS-Datei meiner Site (CSS-Datei). Alles begann, wie sie sollte.

4
Thanushka

Gutschrift: Kann ich die Farbe der Symbolfarbe von Font Awesome ändern?

(diese Antwort Builds zu dieser Antwort)

(zB für das Lesezeichensymbol :)

inyour.css datei:

.icon-bookmark.icon-white {
    color: white;
}

inyour.html datei:

<div class="icon-bookmark icon-white"></div>
3
therobyouknow

Verwenden Sie für Font Awesome 5 SVG Version 

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

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

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

Wie bereits erwähnt, sind fantastische Symbole für Schriftarten Text. Sie werden daher mit den entsprechenden CSS-Attributen formatiert. Zum Beispiel:

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

Wenn sich die Größe des Symbols, wie es mir ziemlich einfällt, überhaupt nicht ändert, fügen Sie dem Attribut font-size "! Important" hinzu.

.fa-Twitter-square {
    font-size: 15px !important;
    color: red;
}
0
gmartinss

Dynamische Änderung der CSS-Eigenschaften der .fa-xxx-Symbole:

<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>
0
yardpenalty

Ich würde Ihnen nicht raten, ein eingebautes font-awesome Styling wie den fa-5x usw. zu verwenden. Aus Angst, sie könnten dies ändern, und Sie müssten Ihren Anwendungscode ändern, um sich an den neuesten Standard zu halten. Sie vermeiden dies einfach, indem Sie jeder font-awesome-Klasse, die Sie formatieren möchten, dieselbe Klasse wie folgt aussagen:

<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

In Ihrer CSS-Datei können Sie die Schriftarten mit den gleichen CSS-Regeln formatieren, mit denen Sie eine normale Schriftart mit ..__ formatieren würden

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

}

Das sollte Ihre font-awesome Schriftarten gestylt bekommen

0
Lawrence Oputa
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
0
Dan Alboteanu

Zum Bemessen von Icons

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

sie können gerne 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

0
TarangP