bootstrap Glyphicons

Question

Bootstrap css使用Glyphicons的半身人.如果我购买了他们的完整产品系列,我将如何将其整合到bootstrap框架中？

Answer 1

使用此CSS精灵生成器,上传zip文件.它将为您创建相关的CSS类(名称来自图像本身),将所有图像合并到一个(透明)PNG中.

Answer 2

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

可缩放矢量图形意味着图标看起来很棒.

从头开始设计,完全向后兼容Twitter Bootstrap 2.0.

Answer 3

您必须重新计算每个字形图标的背景位置到您自己的类中,或者覆盖已经由引导程序设置的类以便使用它们.Twitter的引导程序使用图标的半身(免费)版本,周围是14px,全套的尺寸是原来的两倍,所以旧的background-position's不起作用.

以下是一个bootstraps图标类的示例:

/* 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;
} 

Answer 4

我还在Github上创建了一个.直到之后才看到Marco的帖子.

https://github.com/ekryski/bootstrap-template

Answer 5

根据我的记忆,Glyphicons不会将其图标作为精灵版本(许多图标作为一个图像)提供,而是分别获得每个图标.如果你只计划使用他们的几个图标,这应该没问题.

最好的方法是创建一个单独的css文件并继续使用它们的".icon-"命名约定.

.icon-whatever {
   background:url('..img/someicon.png') 0 0; 
}

默认的背景位置是14px 14px您需要将其重置为0 0我上面所做的.

Answer 6

我为Bootstrap创建了一个sprite和CSS drop-in来提供这个功能.回购和指令在Github上.并非每个图标都有覆盖范围,有些图标仍偏离偏心.要使用更大的图标,只需添加icon-largeCSS类:

<i class="icon-large icon-search"></i>