首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >引导Glyphicons

引导Glyphicons
EN

Stack Overflow用户
提问于 2012-02-29 01:08:41
回答 13查看 91.8K关注 0票数 60

Bootstrap css使用来自Glyphicons的半身像。如果我购买了他们的全部产品线,我如何将其合并到bootstrap框架中?

EN

回答 13

Stack Overflow用户

回答已采纳

发布于 2012-02-29 03:21:07

您必须重新计算每个字形图标在您自己的类中的背景位置,或者覆盖已经由bootstrap设置的类,以便在其中工作。推特的bootstrap使用了半身(免费)版本的图标,它的周围有14px,全套图标的大小是原来的background-position's的两倍,所以旧的bootstrap不能工作。

下面是其中一个引导图标类的示例:

代码语言:javascript
复制
/* 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;
} 
票数 34
EN

Stack Overflow用户

发布于 2012-03-10 10:07:15

使用此CSS sprite generator,上传压缩文件。它将为您创建相关的CSS类(名称取自图像本身),将所有图像合并到一个(透明的) PNG中。

票数 57
EN

Stack Overflow用户

发布于 2012-07-05 17:51:45

您还可以使用Font Awesome解决方案。

可伸缩矢量图形意味着图标在任何大小下看起来都很棒。

从零开始设计,完全向后兼容Twitter Bootstrap2.0.

票数 37
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9486443

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档