Twitter Bootstrap中的Font Awesome vs Glyphicons


81

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

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

Answers:


66

在引导2.xx的Glyphyicons在图像格式,因此你可以在不增加尺寸,改变颜色,背景颜色等很容易。但是,令人敬畏的字体为您提供了可扩展的矢量图标,这些图标可以立即进行自定义-大小,颜色,阴影和使用CSS的强大功能可以完成的任何事情。

真棒字体确实是Glyphyicons的替代品,它可以随时通过新图标进行更新。Fat和Mdo计划在Bootstrap版本3中集成Font-awesome,以替代Glyphyicons。

我的建议是您将引导程序与超赞字体一起使用。首先包括bootstrap css,然后包括Font-awesome css,以便Glyphyicons将被font-awesome覆盖。

更新

bootstrap版本3.xx中,字形符号变为字体格式,即使以12px字体大小也可以很好地呈现。如果您使用的是最新版的fontawesome,即4.01,则可以将两个glyphicons与fontawesome一起使用。


19
+1,但在Bootstrap 3中未实现与Font Awesome的集成。除了开箱即用地支持Bootstrap 2外,FA并未正式与twitter关联。这是支持引导程序的不同字体图标包比较
jrhorn424 2013年

2
更新:Bootstrap 4不再发布Glyphicons。
MushyPeas '16

FontAwesome指出,即使用于商业用途,它也是100%免费的。图示符有一些局限性:“图示符Halflings通常不免费提供”。我不知道“ google material fonts”,但是对于某些产品(js图表模块),您无法自己托管它,只能从其CDN进行链接。
Andrei

使用带有awesome字体的矢量图标有什么优点。字形图标使用哪种类型的图像?
Monojit Sarkar '18

@Ravimallya,您说字形图标的大小和颜色无法更改。我不知道你说的是什么情况。我发现尺寸和颜色可以更改。这是一个示例----->更改字形图标的颜色->几个样本<span class =“ glyphicon glyphicon-user” style =“ color:blue”> </ span>的大小也可以增加。这里是写stackoverflow.com/a/24960243/6188148
Monojit Sarkar,

28

令人赞叹的字体:-超过150个图标-默认引导字体(14px)时像素完美以及微调器动画(可以手动添加)Glyphyicons:-较少的图标-较大字体大小(16px)的像素完美-相同大小的图标

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

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


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"/>

如果您不想要字形文字,而只是想要字体,那您应该去这里定制您的Bootstrap下载,使其不包含字形文字。


13
引导程序附带的字形图标现在也使用字体方法! getbootstrap.com/components/#glyphicons
Neo

怎么样 ?您的链接是否提供了以向量方式使用字形图标的信息。
trante

4
Twitter Bootstrap的新字形已经是矢量格式。
tommaso capelli
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.