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-large CSS类：

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

Answer 7

这里有一篇很棒的关于Bootstrap Icons的文章： http ： //www.themplio.com/twitter-bootstrap-icons

Answer 8

无需加入它。 您可以添加glyphicons并将其与halflings引导程序一起使用。

添加glyphicons（常规集）如下：

/css/glyphicons.css 
/fonts/glyphicons-regular.eot 
/fonts/glyphicons-regular.svg 
/fonts/glyphicons-regular.ttf 
/fonts/glyphicons-regular.woff 
/fonts/glyphicons-regular.woff2

你应该给base-css-class： .glyphicons与bootstraps .glyphicon相同的样式

.glyphicons {
    position:relative;
    top:2px; 
    display:inline-block;
    font-family:'Glyphicons Regular';
    font-style:normal;
    font-weight:normal;
    line-height:1;
    vertical-align:top;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}

接下来，将glyphicons的引用添加到页面中，如下所示：

<link href="/css/glyphicons.css" rel="stylesheet" />

现在，使用完整的“常规”字形和旁边的半身：

<!-- halflings / bootstrap 3 -->
<span class="glyphicon glyphicon-glass"></span>

<!-- Glyphicons Regular set (note the plural suffix!) -->
<span class="glyphicons glyphicons-glass"></span>

其他答案很好，但请记住使用sprite-png时使用font-technique和旧技术的图标之间的区别。 Png并不总是可伸缩的，因此有几种尺寸。 此外，无法设置颜色。 为了与背景形成对比，可以在png上使用.white类从黑色切换到白色。 通过使用字体，像设置字体样式一样设置图标的样式：

.iconstyle {  color: blue;  font-size: 26px;  etc.. }

Answer 9

你可以使用我的解决方案。 将此行放在标题上的bootstrap link url css之后。

<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/opa-icons.css" rel="stylesheet">

然后调用在线html代码

<i class="icon-close icon-red"></i>&nbsp;Someting <!-- 16x16pix size color red -->
<i class="icon32 icon-close icon-blue"></i>&nbsp;Someting <!-- 32x32pix size color red -->

你可以在这里下载资产（图片 - 图标png和css都是zip）：

http://www.photonautes-associes.fr/utils/assets.zip享受:)

Answer 10

从官方引导程序页面下载字体，然后将此代码粘贴到CSS文件中

试试这段代码

@font-face{
font-family: 'Glyphicons Halflings';
src: url('/fonts/glyphicons-halflings-regular.eot');}

Answer 11

我以为我会把我的经验添加到这个列表中。

在尝试将Glyphicons All添加到我现有的迷宫式Bootstrap-riddled代码库时，有几个障碍。 （其中，Glyphicons All使用构造“.glyphicons .glyphicons- [name]”和Bootstrap使用构造“.glyphicon .glyphicon- [name]”）。

我最终决定同时使用它们。 展望未来，我发现我越来越多地使用Glyphicons All构造，但Bootstrap构造仍适用于我现有的所有代码。

是的，包括两个“字体”增加了整体页面的重量，但不是灾难性的。

Answer 12

我做的很简单，工作得很完美。 注意：如果您希望那些漂亮的glyphicons作为字体工作，就像我正在使用的bootstrap版本那样。

1. 在glyphicons zip中，将/ glyphicons / web / bootstrap_example / fonts中的所有字体复制到您的引导字体当前在项目中的位置

2. 在glyphicons zip中，查看/web/bootstrap_example/css/glyphicons.css，将其全部复制并粘贴到您自己的less / css文件中。

3. 只要您自己的css / less文件正确覆盖它们，此步骤可能是不必要的：在项目的bootstrap.css文件中，删除@ font-face stuff，.glyphicon样式和所有glyphicon个别内容标记（即.glyphicon- xxxx：在{content：...}之前。

4. 在包含所有新标签的less / css文件中，执行查找并将“.glyphicons-”替换为“.glyphicon-”

那应该是它，除非我忘了简单的事情。 对我来说很棒。

Answer 13

使用glyphicons classess ，例如：

`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`

我最喜欢的图标字体是Fontello ，你可以下载你需要的图标而不是整个包。