Jak styl ikony barvu, velikost a stín písmo úžasné ikony

Můžete také přidat pouze styl inline:

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

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

Používáte-li současně Bootstrap, můžete použít:

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

V opačném případě:

<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>

Vypadá to, že barva ikony FontAwesome reaguje na textové informace, textovou chybu atd.

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>

soubor inyour.css:

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

inyour.html soubor:

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

Tam je opravdu jednoduchý způsob, jak změnit barvu písma Awesome ikony. 

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

Můžete změnit hexadecimální kód podle svých požadavků. POZNÁMKA: Barva textu také změní barvu ikony, pokud v tagu i není style="color:#00cc6a".

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

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

Zde jsem definoval globální styl v mém CSS, kde hlavní barva je třída, v mém případě jde o světle modrý odstín. Zjistil jsem, že pomocí inline stylů na ikonách s písmo Awesome funguje dobře, esp v případě, když pojmenujete své barvy sémanticky, tj. Nav-color, pokud chcete samostatnou barvu pro to, atd.

V tomto příkladu na svých webových stránkách, a jak jsem napsal i v mém příkladu, nejnovější verze Font Awesome změnila syntaxi mírně upravující velikost.

icon-xxlarge

kde teď musím použít:

icon-3x

To vše samozřejmě závisí na tom, jakou verzi písma Awesome jste nainstalovali do svého prostředí. Snad to pomůže.

Při použití FA 4.4.0

.text-danger
    color: #d9534f

k dokumentu css a pak použít 

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

změní barvu na červenou. Můžete si nastavit vlastní barvu.

Ve FontAwesome 4.0 se třídy mění na 'fa-2x', 'fa-3x'.

Jednoduše můžete definovat třídu ve vašem css souboru a kaskádovat do html souboru jako 

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

nyní zapište do css 

.green{ color:green}

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

Stačí zacílit na předdefinovaný název třídy 

v ex:

HTML

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

CSS

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

Pro velikost: fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.

Pro barvu: <i class="fa fa-link fa-lg" aria- hidden="true"style="color:indianred"></i> Pro stín: .fa-linkedin-square { Textový stín: 3px 6px # 272634; } ``

Měl jsem stejný problém, když jsem se snažil použít ikony přímo z BootstrapCDN (nejjednodušší způsob). Pak jsem si stáhl soubor CSS a zkopíroval ho do složky CSS v mém webu. Soubor CSS (popsaný pod „snadnou cestou“ v úžasné dokumentaci fontu) a vše začalo fungovat tak, jak by mělo.

Kredit: Mohu změnit barvu ikony barvy písma Awesome?

(tato odpověď staví na tuto odpověď)

(například ikonu záložky)

soubor inyour.css:

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

inyour.html soubor:

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

Pro Písmo Awesome 5 SVG version, použijte 

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

Zabalte i tag do p nebo span, pak můžete použít bootstrap css class

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

Jak bylo zdůrazněno, úžasné ikony fontu jsou textové, a proto je upravujete pomocí příslušných atributů CSS. Například:

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

Pokud, jak se mi to stane, se velikost ikony vůbec nezmění, přidejte do atributu font-size "! Important".

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

Dynamicky změnit vlastnosti 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>

Nedoporučoval bych vám použít vestavěný font-awesome styling jako fa-5x atd.; pro strach, že mohou změnit a budete muset držet chainging vaše aplikace kód setkat se s nejnovějším standardem. Jednoduše se tomu vyhnete tím, že každému fontu děkujete každé třídě:

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

Tady je třída fa-sabi-social-icons

Pak ve vašem cssu můžete styl písma použít pomocí stejných pravidel css, jako byste měli vytvořit normální písmo. Např.

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

}

To by mělo dostat vaše písma-úžasné fonty ve stylu

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