Twitter Bootstrap中的Font Awesome vs Glyphicons

问题描述 投票:76回答:3

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

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

twitter-bootstrap font-awesome glyphicons
3个回答
66
投票

在Bootstrap 2.x.x中,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.x.x中,glyphicons变为字体格式,即使在12px字体大小中也能很好地呈现。如果你正在使用最新版本的fontawesome,即4.01,你可以使用两个字形和fontawesome。


28
投票

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

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


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

如果你不想拥有glyphicons而只需要字体 - 真棒,你应该去here并自定义你的Bootstrap下载以获得它没有glyphicons。

© www.soinside.com 2019 - 2024. All rights reserved.