Twitter Bootstrap 中的 Font Awesome 与 Glyphicons

Posted 2023-03-06

【中文标题】Twitter Bootstrap 中的 Font Awesome 与 Glyphicons

【英文标题】：Font Awesome vs Glyphicons in Twitter Bootstrap

【发布时间】：2013-06-23 01:41:26

【问题描述】：

我是 Web 开发的初学者，最近开始使用 Twitter Bootstrap，我知道它使用 Glyphicons，我已经知道如何使用它。但我也遇到了Font Awesome，它说它是为 Bootstrap 构建的。

两者有什么区别？我的意思是一个可以替代另一个吗？还是应该在不同的地方使用它们？

【参考方案1】：

Font awesome 是一组矢量图标，通过使用特定字体和一些 css 获得“魔法”，Glyphicons 使用 sprite-css 技术。 您可以同时使用它们，只需在 Bootstrap 之后添加 css 文件即可。

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>

如果您不想拥有字形图标，而只想拥有令人敬畏的字体，您应该转到 here 并自定义您的 Bootstrap 下载以在没有字形图标的情况下获得它。

【讨论】：

bootstrap 附带的 Glyphicons 现在也使用字体方法！ getbootstrap.com/components/#glyphicons

怎么样？您的链接是否提供了有关以矢量方式使用字形图标的信息。

Twitter Bootstrap 的新字形图标已经采用矢量格式。

【参考方案2】：

在 Bootstrap 2.x.x Glyphyicons 是 图像格式，因此您不能轻易增加大小、更改颜色、背景颜色等。但是，font-awesome 为您提供了可立即自定义的可缩放矢量图标——大小、颜色、阴影以及任何可以通过 CSS 的强大功能完成的事情。

Font-awesome 确实是 Glyphyicons 的替代品，它会不时更新新图标。 Fat 和 Mdo 正计划在 bootstrap 版本 3 中集成 Font-awesome，以替代 Glyphyicons。

我的建议是你使用 bootstrap 和 font-awesome。首先包括 bootstrap css，然后是 Font-awesome css，这样 Glyphyicons 就会被 font-awesome 覆盖。

更新

在 bootstrap 版本 3.x.x 中，字形图标变成了字体格式，即使在 12px 字体大小下也能很好地呈现。如果您使用的是最新版本的 fontawesome，即 4.01，您可以将这两个字形图标与 fontawesome 一起使用。

【讨论】：

+1，但在 Bootstrap 3 中没有实现与 Font Awesome 的集成。FA 没有正式隶属于 twitter，除了开箱即用地支持 Bootstrap 2。这是一个支持引导程序的comparison of different font icon packs。

更新：Bootstrap 4 不再提供 Glyphicons。

FontAwesome 声明，它是 100% 免费的，即使用于商业用途。 Glyphicons 有一些限制：“Glyphicons 半身人通常不是免费提供的”。我不知道“google material fonts”，但是对于某些产品（js图表模块）你不能自己托管，只能从他们的CDN链接。

使用带有字体 awesome.what 类型的图像用于 glyphicons 的矢量图标有什么好处？

@Ravimalya 你说字形图标的大小和颜色不能改变。我不知道你说这句话的背景是什么。我发现尺寸和颜色可以改变。这是一个例子----->改变字形图标颜色->几个样本大小也可以增加。这是写***.com/a/24960243/6188148

【参考方案3】：

字体真棒： - 超过 150 个图标 - 像素完美的默认引导字体（14px） - 图标大小不同，需要自定义 css 才能对齐 - 有项目符号列表、旋转（可以用css3添加）、堆叠图标和spinner动画（可以手动添加 ) Glyphyicons： - 更少的图标 - 更大字体大小（16 像素）的 Pixel Perfect - 相同大小的图标

见： http://tagliala.github.io/vectoriconsroundup/