Bootstrap css使用来自Glyphicons的半身像。如果我购买了他们的全部产品线,我如何将其合并到bootstrap框架中?
发布于 2012-02-29 03:21:07
您必须重新计算每个字形图标在您自己的类中的背景位置,或者覆盖已经由bootstrap设置的类,以便在其中工作。推特的bootstrap使用了半身(免费)版本的图标,它的周围有14px,全套图标的大小是原来的background-position's的两倍,所以旧的bootstrap不能工作。
下面是其中一个引导图标类的示例:
/* class for the icon "fast-backward", notice the positioning values set in pixels */
.icon-fast-backward {
background-position: -216px -72px;
}
/* main class, defining what icon sheet to use */
[class^="icon-"], [class*=" icon-"] {
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
display: inline-block;
height: 14px;
line-height: 14px;
vertical-align: text-top;
width: 14px;
} 发布于 2012-03-10 10:07:15
使用此CSS sprite generator,上传压缩文件。它将为您创建相关的CSS类(名称取自图像本身),将所有图像合并到一个(透明的) PNG中。
发布于 2012-07-05 17:51:45
您还可以使用Font Awesome解决方案。
可伸缩矢量图形意味着图标在任何大小下看起来都很棒。
从零开始设计,完全向后兼容Twitter Bootstrap2.0.
https://stackoverflow.com/questions/9486443
复制相似问题