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

Jak mogę stylizować kolor, rozmiar i cień ikon w ikonach Font Awesome ?

Na przykład witryna Font Awesome wyświetli niektóre ikony na biało, a niektóre na czerwono, ale nie pokaże, CSSjak je stylizować w ten sposób ...

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

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>

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>

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>

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>

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.

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.

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

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.

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

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}

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

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>

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.

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>

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>

W przypadku wersji SVG Font Awesome 5 użyj

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

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

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

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>

text-shadow: 1px 1px 3px rgba(0,0,0,0.5);

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