Font Awesome Simgelerinin simge rengi, boyutu ve gölgesi

Font Awesome'in Simgelerinden simgelerin rengini, boyutunu ve gölgesini nasıl şekillendirebilirim ?

Örneğin, Font Awesome'in sitesi bazı simgeleri beyaz, bazıları kırmızı olarak gösterecek, ancak CSSbu şekilde nasıl stilize edileceğini göstermeyecektir ...

Basitçe yazı tipi olduklarından, bunları yazı tipi olarak biçimlendirebilmelisiniz:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}

Ayrıca satır içi stil de ekleyebilirsiniz:

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

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

Bootstrap'ı aynı anda kullanıyorsanız şunları kullanabilirsiniz:

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

Aksi takdirde:

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

FontAwesome simge rengi metin bilgisine, metin hatasına vb. Yanıt veriyor gibi görünüyor.

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

inyour.css dosyası:

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

inyour.html dosyası:

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

Font Awesome simgelerinin rengini değiştirmenin gerçekten basit bir yolu var.

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

Onaltılı kodu tercihinize göre değiştirebilirsiniz. NOT: Bir olmadıkça metin rengi de simge rengi değişir style="color:#00cc6a"dahilinde ietiketi.

FA 4.4.0 ekleme özelliğini kullanma

.text-danger
    color: #d9534f

belge css ve sonra kullanarak

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

rengi kırmızıya dönüştürür. Herhangi bir renk için kendiniz ayarlayabilirsiniz.

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>

Burada CSS'mde ana rengin bir sınıf olduğu küresel bir stil tanımladım, benim durumumda açık mavi bir renk tonu. Font Awesome'li Simgelerde satır içi stiller kullanmanın iyi çalıştığını, renklerinizi anlamsal olarak adlandırdığınızda esp, yani bunun için ayrı bir renk istiyorsanız nav-color, vb.

Web sitelerinde bu örnekte ve örneğimde nasıl yazdığımda, Font Awesome'in en yeni sürümü, boyutu ayarlama sözdizimini biraz değiştirdi.

icon-xxlarge

şimdi nerede kullanmak zorunda:

icon-3x

Tabii ki, bu, ortamınıza hangi Font Awesome sürümünü yüklediğinize bağlıdır. Bu yardımcı olur umarım.

FontAwesome 4.0'da, sınıflar 'fa-2x', 'fa-3x' olarak değişir.

Basitçe css dosyanızda bir sınıf tanımlayabilir ve html dosyasına bastırabilirsiniz.

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

şimdi css ile yaz

.green{ color:green}

Sadece font-awesome önceden tanımlanmış sınıf adını hedefleyin

örneğin:

HTML

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

CSS

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

Lütfen http://www.w3schools.com/icons/fontawesome_icons_intro.asp bağlantısına bakın

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

Simgeleri doğrudan BootstrapCDN'den (en kolay yol) kullanmaya çalıştığımda da aynı sorunu yaşadım. Sonra CSS dosyasını indirdim ve sitemin CSS klasörüne CSS dosyasını kopyaladım (yazı tipi harika belgelerinde 'kolay yol' altında açıklandı) ve her şey gerektiği gibi çalışmaya başladı.

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

(bu cevap bu cevap üzerine kuruludur )

(yer işareti simgesi için, örneğin :)

inyour.css dosyası:

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

inyour.html dosyası:

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

İ etiketini p veya span içine sarın, ardından bootstrap css sınıfını kullanabilirsiniz

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

İçin Yazı Müthiş 5 SVG sürümü kullanıma

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

Belirtildiği gibi, harika yazı tipi simgeleri metindir, dolayısıyla uygun CSS niteliklerini kullanarak stil uygularsınız. Örneğin:

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

Bana biraz olduğu gibi, simge boyutu hiç değişmezse, font boyutu özelliğine "! İmportant" ekleyin.

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

Simgeleri Boyutlandırmak için

Hem Web Yazı Tipleri + CSS hem de SVG + JS çerçevelerimiz, sayfanızın kullanıcı arayüzü bağlamında simgeleri boyutlandırmak için bazı temel kontroller içerir.

gibi kullanabilirsiniz

<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

.Fa-xxx simgelerinin css özelliklerini dinamik olarak değiştirin:

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

Fa-5x vb.Gibi yazı tipi müthiş stilleri kullanmanızı tavsiye etmem; korkmak için değiştirebilirler ve en son standartlara uymak için uygulama kodunuzu takip etmeye devam etmelisiniz. Sadece aynı sınıfta eşit olarak stil vermek istediğiniz her font-awesome sınıfını vererek bunu önlersiniz:

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

Burada sınıf fa-sabi-social-icons

Daha sonra css'nizde normal bir yazı tipiyle aynı css kurallarını kullanarak yazı tiplerini biçimlendirebilirsiniz. Örneğin

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

Bu harika yazı tiplerini şekillendirmeli