在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

回答

相关问题