Bootstrap图标字体集

Question

Bootstrap的css使用Glyphicons中的半身像图标。 如果我购买了他们的全部产品线，我该如何将其整合到bootstrap框架中？

- Phillip Senn

---

我问艺术家，“你觉得字形图标很有趣吗？”他回答说：“我很高兴你对字形图标感兴趣！关于你的问题：目前在Twitter的Bootstrap中没有类似“ALL Glyphicons”的东西，但这是个好主意，我会考虑一下的。” - Phillip Senn

嗨@phillip，你最终是否修改了这个.less文件？如果是的话，能否分享一下？ - Ryan Schultz

不，我只是继续前进。我只是在想，但这不是必需的。 - Phillip Senn

Answer 1

使用这个CSS雪碧图生成器，上传zip文件。它会为您创建相关的CSS类（名称取自图片本身），将所有图像合并为一个（透明）PNG文件。

- gremo

---

很好的建议Gremo，这个工具将为您完成所有事情。 - Nate Radebaugh

Gremo，你太棒了。使用你的建议，我能够为我的网站创建glyphicons-free的安装设置。现在我有420个图标可供使用。对于其他人来说，我的步骤是：我从文件名中删除了“glyphicons-###_”，并将图像缩小了56％，以使它们与现有的bootstrap glyphicons设置匹配。 - dkleehammer

gremo--我刚发现这个话题，必须感谢你。那个精灵生成器真的很棒。非常惊人。非常非常感谢！ - Zipotontic

Answer 2

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

可缩放矢量图形意味着图标在任何大小下都非常出色。

从头开始设计，与Twitter Bootstrap 2.0完全向后兼容。

- Alex

---

实际上，我发现在小字体大小下的呈现效果相当差。 - Giedrius

图标的宽度不同，因此在布局方面它们是无用的。 - Undistraction

这是正确的方向！和其他人一样，我也认为使用它会把一切搞砸。但是，就像我所做的那样，仔细阅读主页，它只是与Bootstrap很好地集成在一起。非常感谢。 - Adrian P.

你有点错了。虽然Font Awesome确实非常棒，但OP购买的是Glyphicons并希望使用它们。因此，建议其他图标字体对他没有帮助。 - Peanut

Answer 3

为了让字形图标生效，您需要将每个字形图标的背景定位重新计算到自己的类中，或覆盖Bootstrap已经设置的类。Twitter的Bootstrap使用免费版Halfling图标，其大小为14px，完整版则是其两倍，因此旧的background-position将无法正常工作。

这里是一个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;
} 

- Andres Ilich

Answer 4

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

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

- ekryski

---

非常感谢ekryski！我最近学习了Unicode，想知道为什么像Bootstrap这样的框架没有利用它，除非他们觉得他们的精灵在各个浏览器中都是一致的。 - Phillip Senn

哦，我看到Marco对我上面的评论的回复了。 - Phillip Senn

Answer 5

据我所记，Glyphicons没有提供他们的图标作为精灵版本（将多个图标合成为一张图片），而是分别提供每个图标。如果你只打算使用其中几个图标，这应该是可以的。

最好的方法是创建一个单独的CSS文件，并继续使用他们的“.icon-”命名约定。

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

默认的背景位置是14px 14px，所以您需要像我上面所做的那样将其重置为0 0。

- Makotosan

---

Bootstrap版本肯定是一个精灵。 - pbreitenbach

Bootstrap可能是这样，但Makotosan是正确的，Glyphicons pro没有与sprite图像一起分发。这里有一个生成器/CSS，用于由Glyphicons Pro zip文件提供的PNG。 https://gist.github.com/2694578 - andynu

Answer 6

我已经为Bootstrap创建了一个sprite和CSS插件，以提供此功能。仓库和说明在Github上。并非每个图标都有覆盖范围，有些仍然略微偏离中心。要使用更大的图标，只需添加icon-large CSS类即可。

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

- Marco Ceppi

---

谢谢你，Marco！我也注意到Unicode中有很多图标。不知道为什么Bootstrap没有利用它们？我想可能是因为它们在不同的浏览器中可能会有所不同。 - Phillip Senn

Answer 7

不需要将其合并。您只需添加glyphicons并与bootstrap附带的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

你可能应该给基础 CSS 类 .glyphicons 添加与 Bootstrap 的 .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>

其他答案都很好，但要记住使用字体技术和旧技术（使用雪碧图png）的图标之间的区别。Png不总是可伸缩的，因此带有多个尺寸。此外，颜色无法设置。为了与背景形成对比，可以在png上使用.white类将其从黑色切换到白色。通过使用字体，像样式化字体一样样式化图标：

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

- Andries

Answer 8

这里有一篇关于Bootstrap图标的优秀文章：http://www.themplio.com/twitter-bootstrap-icons

- Tom Witek

---

好的，太棒了。嘿，你看过Unicode吗？我简直不敢相信现在浏览器里有这么多内置内容，比如：✔。 - Phillip Senn

@Phillip，现在已经到了 - ✔ :) - Sevenate

Answer 9

从官方的bootstrap页面下载字体，然后将此代码原封不动地粘贴到您的CSS文件中。

尝试这段代码。

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

- User_3535

Answer 10

你可以使用我的解决方案。将这行代码放在引用Bootstrap 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 祝使用愉快 :)

- Bruno Photonautes

---

谢谢Bruno！我会去看看的！ - Phillip Senn