在Twitter中使用圖像圖標引導程序3

我正在從Twitter Bootstrap v2遷移到v3。在V2我在CSS定義十幾自定義圖標：在Twitter中使用圖像圖標引導程序3

.icon-pc { 
    background-image: url("pc.png"); 
    background-position: center center; 
}

我知道，在Twitter的引導v3中，它們現在使用Glyphicons，但這不是我用寫實的手法，因爲我的圖標多種顏色的PNG文件，並不會像字體一樣工作...

有沒有一種簡單的方法來獲得這些工作在v3像舊的v2圖標呢？

來源

2013-10-17 Peter

如果您在引導程序中深入瞭解sprites.less的源代碼，您會看到bootstrap的圖標代碼非常小。創建自己的圖標類集並不難。 –

@MikeRobinson - 謝謝，像魅力一樣工作。 – Peter

如果同一圖標的多種顏色阻止您使用圖標，您是否意識到可以添加第二個類來定義顏色？例如：然後在樣式表中定義.red。 –

複製從sprites.less生成的css這一塊，工作就像一個魅力：

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

現在我好老<i class="icon-custom"></i>工作正常。

來源

2013-10-17 20:09:37 Peter

在Twitter中使用圖像圖標引導程序3

回答

相關問題