twitter-bootstrap Twitter Bootstrap 中的 Font Awesome 与 Glyphicons

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17311231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 17:26:34  来源:igfitidea点击:

Font Awesome vs Glyphicons in Twitter Bootstrap

twitter-bootstrapfont-awesomeglyphicons

提问by user2471133

I am a beginner in web development and I recently started working with Twitter Bootstrap, I know it uses Glyphiconswhich I already know how to use. But I also came across Font Awesomewhich says that it is built for Bootstrap.

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

What are the differences between the two? I mean is one an alternative for the other? Or should you use them in different places?

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

回答by Ravimallya

In Bootstrap 2.x.xGlyphyicons werein image format, hence you can't increase the size, change the color, background-color, etc easily. However, font-awesome gives you scalable vector icons that can instantly be customized — size, color, drop-shadow, and anything that can be done with the power of CSS.

在 Bootstrap 2.xx 中Glyphyicons图像格式,因此你不能轻易地增加大小、改变颜色、背景颜色等。然而,font-awesome 为您提供了可以立即自定义的可缩放矢量图标——大小、颜色、阴影以及任何可以通过 CSS 的力量完成的事情。

Font-awesome is really an alternative for Glyphyicons which is getting updated time-to-time with new icons. Fat and Mdo are planning to integrate Font-awesome in bootstrap version 3 as a replacement for Glyphyicons.

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

My suggestion is you use bootstrap with font-awesome. First include bootstrap css and then Font-awesome css, so that the Glyphyicons will be override by font-awesome.

我的建议是你使用带有 font-awesome 的 bootstrap。首先包含 bootstrap css,然后包含 Font-awesome css,这样 Glyphyicons 将被 font-awesome 覆盖。

UPDATE

更新

In bootstrap version 3.x.xglyphicons become font format, which will render nicely even in 12px font-size. If you're using the latest version of fontawesome, i.e. 4.01, you can use both glyphicons with fontawesome.

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

回答by Neo

Font Awesome: - Over 150 more icons - Pixel perfect at default bootstrap font (14px) - Icons do not have the same size and require custom css for each to align - Has bulleted list, rotation (can be added with css3), stacked icons, and spinner animation (can be added manually ) Glyphyicons: - Less Icons - Pixel Perfect at larger font size (16px) - Same size icons

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

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

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

A side-by-side comparison between popular icon fonts made for Bootstrap.

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

回答by tommaso capelli

Font awesome is a collection of vector icons which are obtained by using a specific font and some css to make the "magic", Glyphicons uses the sprite-css technique.
You can use them both, just add the css file after Bootstrap's one.

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

If you don't want to have glyphicons but just the font-awesome one you should go hereand customize your Bootstrap download to get it without glyphicons.

如果您不想拥有字形,而只想拥有超赞的字体,您应该去这里并自定义您的 Bootstrap 下载以获取它而没有字形。