如何添加自定义图标在Twitter Bootstrap？ [英] How to add custom icon in Twitter Bootstrap?

问题描述

我添加图标与Twitter Bootstrap没有问题。他们有很多替代方案。

I'm adding icon with Twitter Bootstrap without problem. They have a lot of alternatives.

http://twitter.github.com/bootstrap/base-css.html#icons

但是，我找不到一个菜单项的适当图标。这是关于汽车。
我想要的是我想添加我的自定义图标。我如何做到这一点？

However, I couldn't find appropriate icon for one of menu item. It is about "car". What I want is I would like to add my custom icon. How can I do this?

推荐答案

您可以通过在自己的类中定义自己的图标来创建自己的图标，如s：

You can create your own icon by defining it in your own class like s:

.icon-car {
    background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png");
    background-position: center center;
}

记住当然要使用前缀。图标 - * ，因为它由引导程序设置的属性选择器定位，以应用所有样式（widh / height / line-height等...）。

Keeping in mind of course to use the prefix .icon-* since it is targetted by an attribute selector set by the bootstrap to apply all styles (widh/height/line-height etc...).

只要尝试保持与原始图标（14x14）相同的宽度和高度，这样你就不必定义自己的宽度和高度，它不会混淆 line-height 。以下是此类案例的演示： http://jsfiddle.net/RwFeu/

Just try to keep to the same width and height as the original icons (14x14), this way you won't have to define your own width and height and it won't mess with the line-height of your elements. Here is a demo with such a case: http://jsfiddle.net/RwFeu/

这篇关于如何添加自定义图标在Twitter Bootstrap？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！