Twitter Bootstrap'te özel simge nasıl eklenir?

Twitter Bootstrap ile sorunsuz bir şekilde ikon ekliyorum. Çok fazla alternatifi var. http://twitter.github.com/bootstrap/base-css.html#icons Twitter Bootstrap'te özel simge nasıl eklenir?

Ancak, menü öğesinin biri için uygun bir simge bulamadık. Bu "araba" ile ilgili. İstediğim şey özel simgemi eklemek istiyorum. Bunu nasıl yapabilirim? o kadar önyükleme tarafından ayarlanan bir özellik seçici tarafından hedeflenmektedir beri önek .icon-* kullanmak elbette akılda
.icon-car { 
    background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png"); 
    background-position: center center; 
} 
tutulması:

kaynak

2012-05-01 SNaRe

Sen s gibi kendi sınıfında tanımlayarak kendi simgesini oluşturabilir tüm stilleri uygulayın (widh/height/line-height vb ...).

Sadece orijinal simgeleri (14x14), kendi genişliği ve yüksekliği tanımlamak zorunda olmayacak bu şekilde aynı genişlik ve yüksekliğe tutmaya çalışın ve sizin elemanlarının line-height ile karışıklık olmaz. İşte böyle bir durumda olan bir demo: http://jsfiddle.net/RwFeu/

kaynak

2012-05-01 11:09:53

güzel görünüyor tarafından gönderildi örnek dayanmaktadır. Ancak, simge-beyaz çalışmıyor. – SNaRe

@SNaRe evet, bunun nedeni, tanıttığınız simgenin '.icon-white' sprite sayfasının altında olmaması, beyaz simgeler içeren ayrı bir sayfa olmasıdır. –

@SNaRe [beyaz simgeler sayfası] (http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings-white.png), [siyah simgeler sayfası] (http://twitter.github.com/ önyükleme/varlıklar/img/glyphicons-halflings.png). –

İşte bütün simgeleri tek sprite dosyasında bulunmaktadır, böylece biz böyle yapar ve keyfi boyutlu simgeleri izin verebilir.

[class^="icon-custom-"], 
[class*=" icon-custom-"] { 
    background-image: url("https://app.10000ft.com/images/compSpritesButtonsIcons.png?8"); 
} 

.icon-custom-logo { background-position : -530px -700px; width : 142px; height : 158px; } 
.icon-custom-intheoffice { background-position: -395px -60px; width: 24px; height: 24px }

Sonra İşaretlemenize gibi bir CSS dosyası, bu tüm simgeleri içeren tek sprite dosyası varsayar

<i class="icon-search"></i> a standard bootstrap icon 
<i class="icon-custom-intheoffice"></i> a custom icon, using our own sprite file. 
<i class="icon-custom-logo"></i> a logo, an even bigger sprite icon 
<!-- spritefile from www.10000ft.com. not for reuse, please -->

Not oluşturun. Birden fazla hareketli dosya varsa, her simge için background-image'un buna göre ayarlanması gerekir. http://jsfiddle.net/shyamh/cvHdt/

Bu çözüm de

JSFiddle Kevin

kaynak

2013-05-03 15:29:59

Twitter Bootstrap'te özel simge nasıl eklenir?

cevap

İlgili konular