Czy mogę zmienić kolor ikony Font Awesome?

264

Z <a>jakiegoś powodu muszę owinąć ikonę w tagu.
Czy jest jakiś sposób, aby zmienić kolor niesamowitej czcionki na czarny?
czy jest to niemożliwe, dopóki jest owinięte w <a>tagu? Czcionka niesamowita ma być czcionką, a nie obrazem, prawda?

wprowadź opis zdjęcia tutaj

<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>
ZAUFANE
źródło

Odpowiedzi:

347

To działało dla mnie:

.icon-cog {
  color: black;
}

W przypadku wersji Font Awesome powyżej 4.7.0 wygląda to tak:

.fa-cog {
  color: black;
}
Evan Hahn
źródło
@Evans Dzięki, ale problem polega na tym, że kiedyś umieściłem <i class = "icon-cog icon-white"> na komórce tabeli, która jest w kolorze czarnym. Twój css zmusił go również do zmiany na czarny :(
HUSTEN
3
Możesz dodać następujące: .icon-cog.icon-white {color: white; }
Evan Hahn
3
Właśnie się z tym spotkałem - przekonałem się, że dodanie klasy „fa” do wszystkich ikon, a następnie umieszczenie .fa {color: green;}załatwiło sprawę. Następnie możesz zrobić, .fa.icon-white {color: white;}aby uzyskać taki sam efekt, jak chcesz powyżej.
ClarkeyBoy,
Czy można to zmienićbackground-color
vamsikrishnamannem
@vamsikrishnamannem Yup. Możesz dodać background-color: #112233do CSS. Sprawdź ten kod na przykład.
Evan Hahn
50

HTML:

    <i class="icon-cog blackiconcolor">

css:

    .blackiconcolor {color:black;}

możesz także dodać dodatkową klasę do ikony przycisku ...

JB
źródło
1
To miłe, schludne rozwiązanie. Wolę nazywać klasy z przedrostkiem fa, takim jak fa-black lub fa-blue, żeby było jasne, że stosuję je do niesamowitych ikon czcionek.
DavidHyogo,
35

Możesz określić kolor w atrybucie stylu:

<a href="/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>
dandrews
źródło
16
-1 Po pierwsze, jest to błędne, ponieważ zmieni również kolor tekstu, a nie tylko kolor ikony, zgodnie z żądaniem. Po drugie, nie należy promować używania wbudowanego css.
Adrian Schmidt,
Gdzie pytanie brzmi „tylko kolor ikony”, a nie kolor tekstu?
dandrews
3
Myślę, że jest to raczej oczywiste ze względu na sposób sformułowania pytania. I wygląda na to, że się zgodzisz, ponieważ zaktualizowałeś swoją odpowiedź :)
Adrian Schmidt
2
Chcę dać małą wskazówkę Bootstrap. <i> otaguj za pomocą text-primaryklasy, zastąp kolor ikony niebieską. więc dobrze jest być tego świadomym.
elia
9

Aby zmienić czcionkę niesamowite kolory ikon dla całego projektu, użyj tego w swoim css

.fa {
  color : red;
}
ChAnDu353
źródło
To miłe, ale zmienia wszystkie ikony w moim projekcie. Stworzyłem klasy takie jak .fa-black {color: # 000;}. Następnie dodałem klasę Fa-black do ikon, w których chciałem mieć inny kolor.
DavidHyogo,
7

Spróbuj tego:

<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">
Rahul Tathod
źródło
A skąd text-red, text-blueczy text-yellowpochodzą?
colidyre
pochodzi z klas ładujących
Rahul Tathod
6

Jeśli nie chcesz zmieniać pliku CSS, to działa dla mnie. W HTML dodaj styl kolorem:

<i class="fa fa-cog" style="color:#fff;"></i>
Lazaros Papadopoulos
źródło
5

Aby trafić tylko w ikony koła zębatego w tego rodzaju przycisku, możesz nadać temu przyciskowi klasę i ustawić kolor ikony tylko wtedy, gdy jest on wewnątrz przycisku.

HTML:

<a class="my-nice-button" href="/users/edit">
    <i class="icon-cog"></i>
    Edit profile
</a>

CSS:

.my-nice-button>i { color: black; }

Dzięki temu każda ikona będąca bezpośrednim potomkiem twojego przycisku będzie czarna.

Adrian Schmidt
źródło
3

W odniesieniu do odpowiedzi @ClarkeyBoy poniższy kod działa poprawnie, jeśli używasz najnowszej wersji Font-Awesomeikon lub korzystasz z faklas

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

A następnie dodaj icon-whitedo istniejącej klasy

Grupa strategiczna
źródło
2
.fa-search{
    color:#fff;
 }

piszesz ten kod w css i zmieniłby kolor na biały lub dowolny kolor, jaki chcesz, określasz go

Stanjhae
źródło
2

po prostu podaj i określ styl tekstu: D HTML:

<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
   <span style="color:black;">Text Name</span>
</a>
Qaan Lee Hoong
źródło
1

po prostu nadaj mu styl, jaki chcesz

style="color: white;font-size: 20px;"
Rahul Tathod
źródło
1

Można zmienić barwę fontawesome ikoną przez zmianę jego koloru pierwszoplanowego za pomocą css colorwłaściwości . Oto przykłady:

<i class="fa fa-cog" style="color:white">

Obsługuje również svgs

<style>
.fa-cog{
color:white;
}
</style>

<style>
.parent svg, .parent i{
color:white
}
</style>

<div class="parent">
  <i class="fa fa-cog" style="color:white">
</div>

Mohammed Shareef C.
źródło
1

Napisz ten kod w tym samym wierszu, to zmieni kolor ikony:

<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">
Warner J Gaitán Guerrero
źródło
0

Jeśli chcesz zmienić kolor konkretnej ikony, możesz użyć czegoś takiego:

.fa-stop {
    color:red;
}
Ahmad
źródło
0

Możesz zmienić kolor ikony Font Awesome za pomocą klasy bootstrap

posługiwać się

text-color

przykład

text-white
Afeesudheen
źródło
0

Dla mnie jedyne, co zadziałało, to wbudowane css + przesłonięcie

<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>
Crasher
źródło
-6

HTML:

<i class="icon-cog blackiconcolor">

css:

 .blackiconcolor {color:black;}

Korzystanie z klasy da ci bezpłatną właściwość wiązania, którą możesz zastosować do dowolnego wymaganego tagu.

ameya rote
źródło
4
-1 Czcionka Niesamowite ikony to tekst, stąd nazwa. Powinny być pokolorowane przy użyciu css jak każdego innego tekstu, a nie sztuczek specyficznych dla dostawcy. Ponadto, ponieważ są tekstem, są już czarno-białe (lub jednokolorowe).
Adrian Schmidt,
2
@AdrianSchmidt Powyżej podano odpowiedź na konwersję obrazu na czarny, nie chciałem zmieniać tego koloru czcionki, mam nadzieję, że dostaniesz mnie ...
ameya rote
2
Rozumiem. Odpowiedź jest jednak niepoprawna w odniesieniu do pytania. Czcionka Niesamowite ikony to nie obrazy, to tekst.
Adrian Schmidt,