Bootstrap 2'yi kullanarak bazı yerlerde glifiklerin rengini maviye değiştirin, ancak her yerde değiştirin

Kullanıcı arayüzüm için Bootstrap çerçevesini kullanıyorum. Glifonlarımın rengini maviye değiştirmek istiyorum, ancak her yerde değil. Bazı yerlerde varsayılan rengi kullanmalıdır.

Bu iki bağlantıdan bahsettim, ama yararlı bir şey bulamıyorum.

• Önyükleme simgelerine yalnızca CSS kullanarak renk ekleyebilir miyim?
• Bootstrap 3'ün glifikonlarını beyaza nasıl değiştirebilirim?

Lütfen dikkat: Bootstrap 2.3.2 kullanıyorum .

Simge, colorüst öğesinin css özelliğinin değerinden renk alır .

Bunu doğrudan stile ekleyebilirsiniz:

<span class="glyphicon glyphicon-user" style="color:blue"></span>

Veya simgenize bir sınıf olarak ekleyebilir ve ardından yazı tipi rengini CSS'de ayarlayabilirsiniz.

HTML

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-user blue"></span>
<span class="glyphicon glyphicon-trash"></span>

CSS

.blue {
    color: blue;
}

Bu kemanın bir örneği var.

text-successGlyphicon'da Twitter Bootstrap sınıfını uygulamanız yeterlidir:

<span class="glyphicon glyphicon-play text-success">начал работу</span>

Mevcut renklerin tam listesi: Bootstrap Dokümantasyon: Yardımcı sınıflar
(Mavi de mevcuttur)

Sonunda kendime cevap buldum. 2.3.2 önyüklemesine yeni simgeler eklemek için dosyaya Font Awsome css eklemeliyiz . Bunu yaptıktan sonra rengi ve boyutu değiştirmek için stilleri css ile geçersiz kılabiliriz.

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

CSS

.brown{color:#9b846b}

Simgenin rengini değiştirmek istiyorsak sadece kahverengi sınıf ekleyin ve simge kahverengi renkte dönecektir. Ayrıca çeşitli boyutlarda simge sağlar.

HTML

<p><i class="icon-camera-retro icon-large brown"></i> icon-camera-retro</p> <!--brown class added-->
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

Bunu da yapabilirsiniz, umarım yardımcı olur

<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>

Bootstrap 3.0 için, bu benim için çalıştı:

.myclass .glyphicon {color:blue !important;}

Evet, simgeleri beyaz renge ayarlayabilirsiniz. işte benim için böyle çalıştı.

Bootstrap <3

HTML

<i class="icon-ok icon-white"></i>

Bu, simgenizin beyaz görünmesini sağlar.

Bootstrap 2.3.2 için alternatif bir renk kütüphanesi oluşturdum ve eski glifikonlar kütüphanesi için daha fazla renkle ilgilenen herkes için kullanımı kolay ve basit.

Yalnızca bir önyükleme simgesi ise. Simgelerin metin veya daha çok tipografi altında olduğunu unutmayın. Bunun gibi metin rengi sınıfını eklemeniz yeterlidir. Örneğin, metin-birincil, metin-bilgileri vb. Simge sınıfına benzer:

<i class="icon features-icon icons8-collaboration-2 text-primary"></i>
<i class="icon features-icon icons8-collaboration-2 text-secondary"></i>

Bootstrap> = v4.0 bırakılan glifikon desteği

Glificons simge yazı tipini düşürdü. Simgelere ihtiyacınız varsa, bazı seçenekler şunlardır:

Glifonların akış yukarı sürümü

Octicons

Harika Yazı Tipi

Kaynak: https://v4-alpha.getbootstrap.com/migration/#components

Bootstrap> = v4.0 veya daha yenisini kullanıyorsanız, varolan bootstrap stil sınıflarını text-success,text-warning vb. .

Örneğin, fontawesome kullanıyorsanız:

<i class="fa fa-tag text-danger" aria-hidden="true"></i>

CSS:

.blue-icon{
color:blue !important;
}

HTML

<i class="fa fa-wrench blue-icon"></i>

Glificons 4.0 kaldırılır, Font-awesome 4 veya daha yeni tavsiye ederim :)

Önceki tüm cevaplar doğrudur, ancak rengini değiştirmek için tek bir simgeye yalnızca bir simgeye ihtiyacınız varsa basit ve hızlı bir yoludur:

   <p style="color:green">Time icon: <span class="glyphicon glyphicon-time" ></span></p>  

Ben i gibi bootstrap yazı tipi png resim için kullanıyorsanız, renk çalışmıyor.

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

HTML5, görüntüyü renklendirmek için css filtresini kullanır, örnek

filter: invert(100%)  contrast(2) brightness(50%) sepia(40%) saturate(450%) hue-rotate(-50deg);