Twitter'ın bootstrap'i Glyphicons'un simgelerini kullanır. Varsayılan olarak "koyu gri ve beyaz renklerde mevcuttur
":
Simgelerin renklerini değiştirmek için bazı CSS hileleri kullanmak mümkün mü? Her renk için bir simge resmi ayarlamak zorunda kalmayı önleyecek başka bir css3 parlaklığı umuyordum.
Çevreleyen (<i>
) öğenin arka plan rengini değiştirebileceğinizi biliyorum, ancak ben simgenin ön plan renginden bahsediyorum. Sanırım simge görüntüsündeki saydamlığı tersine çevirmek ve ardından arka plan rengini ayarlamak mümkün olabilir.
Peki, bootstrap simgelerine sadece CSS kullanarak renk ekleyebilir miyim?
Evet, eğer Bootstrap ile Font Awesome kullanıyorsanız! Simgeler biraz farklıdır, ancak daha fazlası vardır, her boyutta harika görünürler ve renklerini değiştirebilirsiniz.
Temel olarak simgeler yazı tipleridir ve sadece CSS renk özelliği ile renklerini değiştirebilirsiniz. Entegrasyon talimatları verilen bağlantıda sayfanın alt kısmında yer almaktadır.
Düzenle: Bootstrap 3.0.0 simgeleri artık yazı tipleri!
Bootstrap 3.0.0'ın yayınlanmasıyla birlikte diğer bazı kişilerin de belirttiği gibi, varsayılan simge glifleri artık Font Awesome gibi yazı tipleridir ve renk sadece color
CSS özelliği değiştirilerek değiştirilebilir. Boyutun değiştirilmesi font-size
özelliği ile yapılabilir.
Farklı bir renkte bootstrap simgelerine sahip olmanın bir başka olası yolu, istenen renkte (örneğin macenta) yeni bir .png oluşturmak ve bunu /path-to-bootstrap-css/img/glyphicons-halflings-magenta.png olarak kaydetmektir.
değişkenler.less** dosyanızda şunları bulun
// Sprite icons path
// -------------------------
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
ve şu satırı ekleyin
@iconMagentaSpritePath: "../img/glyphicons-halflings-magenta.png";
sprites.less** dosyanıza şunları ekleyin
/* Magenta icons with optional class, or on hover/active states of certain elements */
.icon-magenta,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
background-image: url("@{iconMagentaSpritePath}");
}
Ve bu şekilde kullan:
<i class='icon-chevron-down icon-magenta'></i>
Umarım birilerine yardımcı olur.
Mask-image` özelliğini kullanın, ancak bu biraz zor bir işlemdir. Safari blogunda burada gösterilmiştir.
Ayrıca derinlemesine açıklanmıştır burada.
Temel olarak, örneğin background-image: gradient(foo);
içeren bir CSS kutusu oluşturacak ve ardından bu PNG görüntülerine dayalı bir görüntü maskesi uygulayacaksınız.
Bu size Photoshop'ta tek tek görüntüler hazırlarken geliştirme süresinden tasarruf sağlayacaktır, ancak görüntüleri çok çeşitli renklerde görüntülemeyecekseniz çok fazla bant genişliği tasarrufu sağlayacağını sanmıyorum. Şahsen ben bunu kullanmazdım çünkü tekniği etkili bir şekilde kullanmak için işaretlemenizi ayarlamanız gerekir, ancak ben "saflık zorunludur" düşünce ekolünün bir üyesiyim.