Önyükleme simgelerine yalnızca CSS kullanarak renk ekleyebilir miyim?

159

Twitter'ın bootstrap'i Icons by Glyphicons kullanıyor . Bunlar available in dark gray and whitevarsayılan olarak " " dir:

Simgelerin renklerini değiştirmek için bazı CSS hileleri kullanmak mümkün müdür? Her renk için bir simge görüntüsünün ayarlanmasını engelleyecek başka bir css3 parlaklığı umuyordum.

Encing ( ) öğesinin arka plan rengini değiştirebileceğinizi biliyorum , ancak simge ön plan renginden bahsediyorum. Sanırım simge görüntüsünde saydamlığı tersine çevirmek ve ardından arka plan rengini ayarlamak mümkün olurdu.

Öyleyse, yalnızca CSS kullanarak önyükleme simgelerine renk ekleyebilir miyim?

— cwd
kaynak

Ben öyle düşünmüyorum ... Ama bunu javascript ve kanvas element ile yapabilirsiniz.

— bfavaretto

@bfavaretto - detaylandırabilir misiniz? simgelerin her birini çizmek veya mevcut png görüntüsünü bir şekilde kullanmak için kod / koordinatlar bulmak mı istiyorsunuz?

— cwd

1

Maalesef, size kod önermek için tuval öğesinde yeterince deneyimli değilim, ancak pikselleri tuvalle ayrı ayrı işleyebileceğinizi biliyorum.

— bfavaretto

189

Evet, Bootstrap ile Font Awesome kullanıyorsanız ! Simgeler biraz farklı, ancak daha fazlası var, herhangi bir boyutta harika görünüyorlar ve renklerini değiştirebilirsiniz.

Temel olarak simgeler yazı tipleridir ve sadece CSS color özelliğiyle renklerini değiştirebilirsiniz. Entegrasyon talimatları, sağlanan bağlantıda sayfanın altındadır.

Edit: Bootstrap 3.0.0 simgeleri şimdi yazı tipleri!

Bootstrap 3.0.0'ın piyasaya sürülmesinden başka bazılarının da bahsettiği gibi, varsayılan simge glifleri artık Font Awesome gibi yazı tipleridir ve renk sadece colorCSS özelliği değiştirilerek değiştirilebilir . Boyutun değiştirilmesi font-sizeözellik yoluyla yapılabilir .

— hajpoj
kaynak

9

Ahh, akıllı! cursor: default;Kullanıcıların I-Bar'ı görmemesi için ayarlamayı unutmayın . Ayrıca, gerçekten zeki bir yazı tipi olan FF Chartwell'e göz atın

— Dai

4

Fareyle üzerine geldiğinizde (bir kelime işlemcide olduğu gibi) imleciniz büyük bir büyük harf " I" karakterine benziyorsa , metin seçmek için kullanılır. CSS'de buna denir cursor: text;. "I-ışını" olarak da bilinir.

— Dai

38

Bootstrap RC 3'ün en son sürümünde, simgelerin rengini değiştirmek, istediğiniz renge sahip bir sınıf eklemek ve yayılma alanına eklemek kadar basittir.

Varsayılan siyah renk:

<h1>Password Changed <span class="glyphicon glyphicon-ok"></span></h1>

olacaktı

<h1>Password Changed <span class="glyphicon glyphicon-ok icon-success"></span></h1>

CSS

.icon-success {
    color: #5CB85C;
}

Bootstrap 3 Glificons Listesi

— fseminario
kaynak

17

Glifonlar artık yazı tipi olduğundan, simgelere uygun rengi uygulamak için bağlamsal sınıflar kullanılabilir .

Örneğin:  css'e eklemek text-infosimgeyi mavi renk yapar.

— truncie
kaynak

Teşekkür bağlamsal sınıfları uygulamak için bir yol arıyordu. Metin- * bağlamsal sınıflarından herhangi biri çalışacaktır

— Dustin Hodges

14

Farklı bir renkte bootstrap simgelerine sahip olmanın bir başka olası yolu, istenen renkte (ör. Macenta) yeni bir .png oluşturmak ve / path-to-bootstrap-css / img / glyphicons-halflings- macenta .png olarak kaydetmektir.

Senin içinde variables.less find

// Sprite icons path
// -------------------------
@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

ve bu satırı ekle

@iconMagentaSpritePath:     "../img/glyphicons-halflings-magenta.png";

Senin içinde sprites.less eklenti

/* 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 şu şekilde kullanın:

<i class='icon-chevron-down icon-magenta'></i>

Umarım birine yardımcı olur.

— Sepp Ludger
kaynak

5

sadece tekrarlamak istedimI was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color

— cwd

Sadece çapraz tarayıcı uyumlu CSS ile yapılamaz. Genellikle insanlar ilgili simgelerle bir renk şemasına ihtiyaç duyarlar - bu yüzden 5'e kadar renk setinin o kadar da zor olmadığını söyleyebilirim.

— foxybagga

@seppludger Nasıl yeni bir renk buçukluk hareketli grafik oluşturursunuz? Bunu başardınız mı? Herhangi bir grafik düzenleyiciye yüklersem renkleri değiştiremiyorum.

— Norman

7

Benim için bunu yapan hızlı ve kirli iş, aslında simgeyi renklendirmek değil, istediğiniz renkte bir etiket veya rozet ile çevrelemek;

<span class="label-important label"><i class="icon-remove icon-white"></i></span>
<span class="label-success label"><i class="icon-ok icon-white"></i></span>

— frbl
kaynak

Cevabınız yararlıydı, + 1.Düzenleme simgesini kullanmak istedim ve sarı renk koymak istiyorum. Bana bunu nasıl yapacağımı söyleyebilir misin?

Sadece ikon-ok'u başka bir şeye değiştirebilirsin; örneğin, simgesi-beyaz"> . Örneğin: . Yeni bootstrap imo için gitmek daha iyidir ..

— frbl

6

Bootstrap Glificons yazı tipidir. Bu, CSS stiliyle diğer metinler gibi değiştirilebileceği anlamına gelir.

CSS:

<style>
   .glyphicon-plus {
       color: #F00; 
   }
</style>

HTML:

<span class="glyphicon glyphicon-plus"></span>

Misal:

<!doctype html>
<html>
<head>
<title>Glyphicon Colors</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
   .glyphicon-plus {
        color: #F00;    
   }
</style>
</head>

<body>
    <span class="glyphicon glyphicon-plus"></span>
</body>
</html>

Jen Kramer'in Bootstrap 3 ile Up and Running kursunu izleyin veya özel stillerle çekirdek CSS'yi geçersiz kılma ile ilgili bireysel dersi izleyin .

— Eugene
kaynak

4

Bu biraz dolambaçlı ..

Glifleri böyle kullandım

  </div>
        <div class="span2">
            <span class="glyphicons thumbs_up"><i class="green"></i></span>
        </div>
        <div class="span2">
            <span class="glyphicons thumbs_down"><i class="red"></i></span>
        </div>

ve rengi etkilemek için, kafasına böyle bir css ekledim

<style>
        i.green:before {
            color: green;
        }
        i.red:before {
            color: red;
        }
    </style>

Voila, yeşil ve kırmızı başparmak.

— Canavarlar X
kaynak

4

Ayrıca stil etiketi ile çalışır:

<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>

<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>

resim açıklamasını buraya girin

— joan16v
kaynak

3

Aslında çok kolay:

sadece kullan:

.icon-name{
color: #0C0;}

Örneğin:

.icon-compass{
color: #C30;}

Bu kadar.

— Aniruddh Dixit
kaynak

3

mask-imageÖzelliği kullanın , ama biraz hack. Buradaki Safari blogunda gösterilmektedir .

Ayrıca burada derinlemesine açıklanmıştır .

Temel olarak, a ifadesiyle bir CSS kutusu oluşturacak background-image: gradient(foo);ve daha sonra bu PNG görüntülerine dayanarak bir görüntü maskesi uygulayacaksınız.

Photoshop'ta tek tek görüntüler oluşturarak geliştirme zamanından tasarruf etmenizi sağlar, ancak görüntüleri çok çeşitli renklerde göstermediğiniz sürece çok fazla bant genişliği tasarrufu sağlayacağını düşünmüyorum. Şahsen ben kullanmazdım çünkü tekniği etkili bir şekilde kullanmak için işaretlemenizi ayarlamanız gerekir, ama ben "saflık zorlayıcı" düşünce okulunun bir üyesiyim.

— Dai
kaynak

1

Unutmayın mask-imagemülk için destek o kadar da iyi değil .

— Scott Bartell

1

Kabul edilen cevap (harika yazı tipini kullanarak) doğru cevaptır. Ancak kırmızı varyantın doğrulama hataları üzerinde gösterilmesini istediğimden, bu sitede nazikçe sunulan bir addon paketi kullandım .

Sadece mutlak (/ ile başlayan) ve göreli olmayı tercih çünkü css dosyalarında url yolları düzenledi. Bunun gibi:

.icon-red {background-image: url("../img/glyphicons-halflings-red.png") !important;}
.icon-purple {background-image: url("../img/glyphicons-halflings-purple.png") !important;}
.icon-blue {background-image: url("../img/glyphicons-halflings-blue.png") !important;}
.icon-lightblue {background-image: url("../img/glyphicons-halflings-lightblue.png") !important;}
.icon-green {background-image: url("../img/glyphicons-halflings-green.png") !important;}
.icon-yellow {background-image: url("../img/glyphicons-halflings-yellow.png") !important;}
.icon-orange {background-image: url("../img/glyphicons-halflings-orange.png") !important;}

— mppfiles
kaynak

Son olarak, Bootstrap'ın eski sürümleriyle uyumlu

— Dmitry Ginzburg

1

Rengi global olarak da değiştirebilirsiniz

yani

 .glyphicon {
       color: #008cba; 
   }

— Geliştirici
kaynak

1

GLYPHICONS'u kullanın, sadece CSS'yi ayarlayarak rengi değiştirebileceksiniz:

#myglyphcustom {
    color:#F00;
}

— Valter Lorran
kaynak

0

Bu pasajı bu eski gönderiye ekleyebileceğimi düşündüm. Simgeler yazı tipleri olmadan önce geçmişte yaptığım şey bu:

<i class="social-icon linkedin small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>
<i class="social-icon facebook small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>

Bu @frbl'in sinsi cevabına çok benzer, ancak başka bir görüntü kullanmaz. Bunun yerine, öğenin arka plan rengini ayarlar ve tüm öğeyi "yuvarlatılmış" hale getirmek için whiteCSS özelliğini kullanır . Fark ederseniz, (7.5px) değeri ve özelliğinin tam olarak yarısıdır (her ikisi de 15px, simgeyi kare yapar), öğeyi dairesel hale getirir .border-radiusborder-radiuswidthheight

— WebWanderer
kaynak