Jak stylizować kolor, rozmiar i cień ikon Awesome Font

Odpowiedzi:

466

Ponieważ są to po prostu czcionki, powinieneś mieć możliwość nadania im stylu czcionek:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}
David mówi, że przywraca Monikę
źródło
4
@David Thomas: To dobre rozwiązanie. Dziękujemy za opublikowanie tego. Jednak wciąż jestem zaskoczony, dlaczego niesamowite czcionki czasami wyświetlają ikony w kolorze białym, a czasem w kolorze czarnym. JAKA JEST SZTUKA? Jak zauważyła GirlCanCode2, przykłady na stronie internetowej FA pokazują zarówno czarno-białe ikony, jak i tekst. . . Po zbadaniu elementów w Firebug, CSS dla określonych ikon (np. icon-info) zostaje [nadpisany] jako biały. Czy to naprawdę musimy zrobić? Brak opcji białej ikony jak w bootstrap.css?
Ace
1
aby zmienić kolor, zaznacz to w SO, mam nadzieję, że ktoś komuś pomoże
shaijut
@Ace Wiem, że to jest stare i być może już się tego nauczyłeś, ale także dla innych, którzy mają pytanie, które możesz chcieć przyjrzeć się specyfice tutaj i tutaj . Inną rzeczą, o której należy wiedzieć, jest kaskada CSS; na przykład zamiast tego stosowane są style i arkusze stylów, które pojawiają się po innych, chyba że ich selektory reguł stylów są mniej szczegółowe (jak w przypadku specyficzności). Tak więc, moim ulubionym ćwiczeniem jest co najmniej dopasowanie do specyfiki i porzucenie stylu.
Jan
158

Możesz także po prostu dodać styl wbudowany:

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

<i class="icon-warning-sign" style="color:red"></i>
dandrews
źródło
7
Mimo elitarnych głosów, ta odpowiedź działa dobrze. Ponieważ czcionka niesamowita jest czcionką, reaguje na style i klasy wpływające na tekst.
AaronLS
16
@NightOwl Najlepszą praktyką jest również stosowanie minimalizacji, łączenia i buforowania tych zasobów. Żadna z odpowiedzi tutaj nie świadczy o żadnej z tych rzeczy, a próba egzekwowania najlepszych praktyk powinna być przestrzegana w kontekście pojedynczej odpowiedzi, elitarnej IMO. Każdy, kto rozumie CSS, powinien móc wziąć ten styl i przenieść go do klasy CSS.
AaronLS,
4
@NightOwl Nawet najlepsza odpowiedź jest okropna pod względem najlepszych praktyk. Nie powinieneś tworzyć stylów we współdzielonych plikach CSS, które odwołują się do elementów przez #id, ponieważ tylko jeden element mógłby subskrybować ten styl na każdej stronie. Gdybym z tego powodu przegłosował, czy nie byłbym dość elitarny? Obaj odpowiadający podjęli skuteczny wysiłek, aby udzielić pytającemu przydatnych informacji, i nie sądzę, że należy ich zlekceważyć, gdy ich odpowiedź jest rzeczywiście skuteczna.
AaronLS
31
Jeśli ktoś chce uzupełnić odpowiedź komentarzem wskazującym, że ogólnie najlepszą praktyką jest niestosowanie stylów wbudowanych, byłoby to właściwe. Skuteczna i pouczająca odpowiedź nie powinna być lekceważona nad takimi trywialnościami, gdy ktoś mógłby po prostu poprawić istniejącą wartość odpowiedzi poprzez dodanie komentarza.
AaronLS,
1
Dla mnie nie ma sensu umieszczać prostej kolorowej dyrektywy css we własnej klasie i łączyć ją z zasobami css. Co zrobisz? class='icon-ok-sign my-red-class'? czy class='icon-ok-sign-red'? To sprawia, że ​​jest mniej czytelny i dodaje niepotrzebnego poziomu złożoności.
nurettin
114

Jeśli używasz Bootstrap w tym samym czasie, możesz użyć:

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

Inaczej:

<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>
Qian Chen
źródło
1
Z pewnością rozwiązanie tego pytania nie wymaga użycia bootstrapu
JG Estiot
1
Może nie wymaga bootstrapu, ale tak znalazłem to pytanie. Dzięki Elgs!
Will Lovett,
1
Ze zrzutu ekranu widać, że już używają bootstrapu. Sensowne byłoby dalsze używanie go w celu utrzymania tej samej palety kolorów, a nie duplikowania kodu.
Simon Luijk,
subtelne, ale ważne: sukces tekstu to kolor tekstu, a nie kolor powierzchni przycisku dla sukcesu btn. Jeśli więc chcesz, aby ikona wyglądała jak „płaski przycisk”, sukces tekstu będzie nieco inny. Uważam, że jest to najbardziej widoczne w ostrzeżeniu tekstowym, ponieważ jest brzydka żółta w przeciwieństwie do bardzo widocznej pomarańczy
Josh Petitt
44

Wygląda na to, że kolor ikony FontAwesome reaguje na informacje tekstowe, błędy tekstowe itp.

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>
użytkownik1695595
źródło
8
W przypadku Bootstrap, <i class = "fa fa-warning text-dangerous"> </i>
Mastro
To chyba najlepsza odpowiedź na tej stronie, przynajmniej dla mnie, ponieważ już używam Bootstrap i to pasuje do tego paradygmatu.
Jake Toronto,
17

plik inyour.css:

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

Twój plik.html:

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>
gingin
źródło
13

Istnieje naprawdę prosty sposób na zmianę koloru ikon Font Awesome.

<!-- 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>

Możesz zmienić kod szesnastkowy zgodnie z własnymi preferencjami. UWAGA: Kolor tekstu również zmieni kolor ikony, chyba że style="color:#00cc6a"w itagu znajduje się znak.

Calum Childs
źródło
9

Korzystanie z dodawania FA 4.4.0

.text-danger
    color: #d9534f

do dokumentu css, a następnie za pomocą

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

zmienia kolor na czerwony. Możesz ustawić własny dla dowolnego koloru.

Steve Gutierrez
źródło
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
źródło
8

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

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

Tutaj zdefiniowałem styl globalny w moim CSS, w którym główny kolor jest klasą, w moim przypadku jest to jasnoniebieski odcień. Uważam, że użycie stylów wbudowanych w ikonach z czcionką Awesome działa dobrze, szczególnie w przypadku semantycznego nadawania nazw kolorom, tj. Nav-color, jeśli chcesz do tego osobny kolor itp.

W tym przykładzie na ich stronie internetowej, a także w tym, co napisałem w moim przykładzie, najnowsza wersja Font Awesome nieznacznie zmieniła składnię dostosowywania rozmiaru. Wcześniej była:

icon-xxlarge

gdzie teraz muszę użyć:

icon-3x

Oczywiście wszystko zależy od tego, którą wersję Font Awesome zainstalowałeś w swoim środowisku. Mam nadzieję że to pomoże.

kinghenry14
źródło
7

W FontAwesome 4.0 klasy zmieniają się na „fa-2x”, „fa-3x”.

angelokh
źródło
7

Po prostu możesz zdefiniować klasę w pliku css i kaskadować ją do pliku HTML jak

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

teraz zapisz w css

.green{ color:green}
gdmanandamohon
źródło
6

Po prostu celuj w niesamowitą czcionkę predefiniowaną nazwę klasy

w ex:

HTML

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

CSS

i.fa {
    color: red;
    font-size: 30px;
}
Jonca33
źródło
5

Proszę odnieść się do linku 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
źródło
4

Miałem ten sam problem, gdy próbowałem użyć ikon bezpośrednio z BootstrapCDN (najłatwiejszy sposób). Następnie pobrałem plik CSS i skopiowałem go do folderu CSS mojej witryny plik CSS (opisany pod „łatwym sposobem” w niesamowitej dokumentacji czcionek) i wszystko zaczęło działać tak, jak powinno.

Thanushka
źródło
3

Kredyt: Czy mogę zmienić kolor ikony Font Awesome?

(ta odpowiedź opiera się na tej odpowiedzi)

(na przykład ikonę zakładki :)

plik inyour.css:

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

Twój plik.html:

<div class="icon-bookmark icon-white"></div>
therobyouknow
źródło
3

Zawiń tag i w p lub span, wtedy możesz użyć bootstrap css

<p class="text-success"><i class="fa fa-check"></i></p>
etlds
źródło
2

W przypadku wersji SVG Font Awesome 5 użyj

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
czLukasss
źródło
1

Jak już wspomniano, niesamowite ikony czcionek to tekst, w związku z czym stylizujesz go za pomocą odpowiednich atrybutów CSS. Na przykład:

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

Jeśli, jak mi się zdarza, rozmiar ikony w ogóle się nie zmienia, dodaj „! Ważne” do atrybutu rozmiar czcionki.

.fa-twitter-square {
    font-size: 15px !important;
    color: red;
}
gmartinss
źródło
1

Do wymiarowania ikon

Obie frameworki + czcionki CSS i SVG + JS zawierają kilka podstawowych elementów sterujących do zmiany rozmiaru ikon w kontekście interfejsu użytkownika strony.

możesz użyć jak

<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
źródło
0

Dynamicznie zmieniaj właściwości css ikon .fa-xxx:

<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
źródło
0
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
Dan Alboteanu
źródło
0

Nie radziłbym ci używać wbudowanej niesamowitej czcionki, takiej jak fa-5x itp .; w obawie, że mogą to zmienić, a Ty będziesz musiał ciągle zastanawiać się nad kodem aplikacji, aby spełnić najnowszy standard. Po prostu tego unikasz, dając każdej niesamowitej czcionce klasie, którą chcesz stylowo ujednolicić, tę samą klasę:

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

Oto klasa fa-sabi-social-icons

Następnie w swoim css możesz stylizować czcionki przy użyciu tych samych reguł css, które stosowałbyś do normalnej czcionki. na przykład

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

To powinno nadać twoim czcionkom niesamowite czcionki

kboul
źródło