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.