Font Awesome'in simge rengini değiştirebilir miyim?


264

Herhangi bir <a>nedenden dolayı ikonumu bir etikete sarmam gerekiyor.
Yazı tipi harika bir simgenin rengini siyaha dönüştürmenin olası bir yolu var mı?
veya bir <a>etikete sarıldığı sürece imkansız mı? Harika yazı tipi görüntü değil yazı tipi olması gerekiyordu, değil mi?

resim açıklamasını buraya girin

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


Yanıtlar:


347

Bu benim için çalıştı:

.icon-cog {
  color: black;
}

Font Awesome'in 4.7.0'ın üzerindeki sürümleri için şu şekilde görünür:

.fa-cog {
  color: black;
}

@Evans Teşekkürler ama sorun bazen siyah renkli tablo hücresine <i class = "icon-cog icon-white"> koydum.
CSS'niz

3
Aşağıdakileri ekleyebilirsiniz: .icon-cog.icon-white {renk: beyaz; }
Evan Hahn

3
Sadece bununla karşılaştım - tüm simgelere bir 'fa' sınıfı eklemenin ve sonra .fa {color: green;}hile yapmanın olduğunu buldum . Daha sonra .fa.icon-white {color: white;}, yukarıdaki ile aynı efekti elde etmek için yapabilirsiniz .
ClarkeyBoy

Değiştirmek mümkün mübackground-color
vamsikrishnamannem

@vamsikrishnamannem Yup. background-color: #112233CSS'ye ekleyebilirsiniz . Check out bu kodu bir örnek için.
Evan Hahn

50

HTML:

    <i class="icon-cog blackiconcolor">

css:

    .blackiconcolor {color:black;}

düğme simgesine ekstra sınıf da ekleyebilirsiniz ...


1
Bu güzel, temiz bir çözüm. Fa-black veya fa-blue gibi bir fa önekiyle sınıfları adlandırmayı tercih ediyorum, sadece yazı tipi müthiş simgelerine uyguladığımı netleştirmek için.
DavidHyogo

36

Stili niteliğinde rengi belirtebilirsiniz:

<a href="/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>

16
-1 İlk olarak, bu yanlıştır, çünkü istendiği gibi sadece simgenin rengini değil, metnin rengini de değiştirecektir. İkinci olarak, satır içi css kullanımı desteklenmemelidir.
Adrian Schmidt

Soru, metnin rengini değil, "yalnızca simgenin rengini" nerede söylüyor?
dandrews

3
Bence bu sorunun açık bir şekilde ifade edildiği şekliyle ima ediliyor. Ve cevabınızı güncellediğiniz için kabul edeceğiniz anlaşılıyor :)
Adrian Schmidt

2
Küçük bir ipucu vermek istiyorum Bootstrap. sınıfı <i> kullanarak etiketleyin text-primary, simge rengini mavi olarak geçersiz kılın. farkında olmak güzel.
elia

9

Tüm projeniz için yazı tipi harika simgeler rengini değiştirmek için bunu css'nizde kullanın

.fa {
  color : red;
}

Bu güzel ama projemdeki tüm simgeleri değiştiriyor. .Fa-black {color: # 000;} gibi sınıflar oluşturdum. Daha sonra fa-black sınıflarını farklı bir renk istediğim simgelere ekledim.
DavidHyogo

7

Bunu dene:

<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">

Ve nerede gelmez text-red, text-blueya text-yellowgeliyor?
colidyre

bootstrap sınıflarından geliyor
Rahul Tathod

6

CSS dosyasını değiştirmek istemiyorsanız, bu benim için işe yarar. HTML'de renkle stil ekleyin:

<i class="fa fa-cog" style="color:#fff;"></i>

5

Bu tür düğmelerdeki yalnızca dişli simgelere basmak için düğmeye bir sınıf verebilir ve simgenin rengini yalnızca düğmenin içindeyken ayarlayabilirsiniz.

HTML:

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

CSS:

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

Bu, düğmenizin doğrudan torunu olan herhangi bir simgeyi siyah yapar.


3

@ClarkeyBoy yanıtına referansla, Font-Awesomesimgelerin en son sürümünü kullanıyorsanız veya fasınıfları kullanıyorsanız , aşağıdaki kod iyi çalışır

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

Ve sonra icon-whitemevcut sınıfa ekleyin


2
.fa-search{
    color:#fff;
 }

bu kodu css'e yazarsanız rengi beyaza veya istediğiniz herhangi bir renge dönüştürürsünüz


2

sadece istediğiniz gibi metin stili verin: D HTML:

<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
   <span style="color:black;">Text Name</span>
</a>


1

Bir fontawesome simgesinin rengini , css colorözelliğini kullanarak ön plan rengini değiştirerek değiştirebilirsiniz . Aşağıdakiler örnektir:

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

Bu aynı zamanda svgs'yi de destekler

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


1

Bu kodu aynı satıra yazın, bu simge rengini değiştirir:

<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">

0

Belirli bir simgenin rengini değiştirmek istiyorsanız, bunun gibi bir şey kullanabilirsiniz:

.fa-stop {
    color:red;
}

0

Font Awesome'in simge rengini bootstrap sınıfıyla değiştirebilirsiniz

kullanım

text-color

misal

text-white

0

Benim için çalışan tek şey satır içi css + geçersiz kılma

<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>

-6

HTML:

<i class="icon-cog blackiconcolor">

css:

 .blackiconcolor {color:black;}

Class kullanmak, ihtiyacınız olan herhangi bir etikete uygulayabileceğiniz ücretsiz bir ciltleme özelliği verecektir.


4
-1 Yazı Tipi Başar simgeleri metin, dolayısıyla adı. Satıcıya özgü hileler değil, diğer metinler gibi css kullanılarak renklendirilmelidir. Ayrıca, metin oldukları için zaten siyah-beyaz (veya tek renkli).
Adrian Schmidt

2
@AdrianSchmidt Yukarıda verilen cevap, bir resmi siyaha dönüştürmek içindir, bununla yazı tipi rengini değiştirmek istemedim, umarım beni
alırsın

2
Anlıyorum. Yine de soruya cevap hala yanlış. Font Awesome simgeleri resim değil, metindir.
Adrian Schmidt
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.