Twitter Bootstrap中的Font Awesome vs Glyphicons

use*_*133 78 twitter-bootstrap font-awesome glyphicons

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

两者有什么不同?我的意思是另一个替代?或者你应该在不同的地方使用它们?

Rav*_*lya 66

在引导2.xx的 Glyphyicons 在图像格式,因此你可以在不增加尺寸,改变颜色,背景颜色等很容易.但是,font-awesome为您提供可立即定制的可缩放矢量图标 - 大小,颜色,阴影以及可以通过CSS的强大功能完成的任何事情.

Font-awesome实际上是Glyphyicons的替代品,它随着新图标不断更新.Fat和Mdo计划在引导版本3中集成Font-awesome作为Glyphyicons的替代品.

我的建议是你使用bootstrap和font-awesome.首先包括bootstrap css然后包含Font-awesome css,这样Glyphyicons将被字体超级覆盖.

UPDATE

bootstrap版本3.xx中, glyphicons变为字体格式,即使在12px字体大小中也能很好地呈现.如果你正在使用最新版本的fontawesome,即4.01,你可以使用两个字形和fontawesome.

  • +1,但与Font Awesome的集成没有在Bootstrap 3中实现.除了支持Bootstrap 2开箱即用之外,FA并没有正式加入twitter.这是支持bootstrap的[不同字体图标包的比较](http://tagliala.github.io/vectoriconsroundup/). (19认同)
  • 更新:Bootstrap 4不再提供Glyphicons. (2认同)

Neo*_*Neo 28

字体真棒: - 超过150多个图标 - Pixel完美默认自举字体(14px) - 图标不具有相同的大小,并且需要每个对齐的自定义css - 具有项目符号列表,旋转(可以使用css3添加),堆叠图标和微调动画(可手动添加)Glyphyicons: - 较少的图标 - 较大的字体大小的像素完美(16px) - 相同大小的图标

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

为Bootstrap制作的流行图标字体之间的并排比较.


tom*_*lli 12

字体真棒是一组矢量图标,通过使用特定字体和一些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"/>
Run Code Online (Sandbox Code Playgroud)

如果您不想拥有字形,但只需要字体很棒,那么您应该去这里并自定义您的Bootstrap下载以获得没有glyphicons的字形.

  • 引导程序附带的Glyphicons现在也使用字体方法!http://getbootstrap.com/components/#glyphicons (13认同)
  • Twitter Bootstrap的新glyphicons已经是矢量格式. (4认同)