web-dev-qa-db-ja.com

TwitterのFont AwesomeとGlyphicons Bootstrap

私はWeb開発の初心者であり、最近Twitter Bootstrapの使用を開始しました。これは Glyphicons を使用していることを知っています。しかし、私は Font Awesome に出くわしました。

2つの違いは何ですか?つまり、一方は他方の代替物ですか?または、それらを異なる場所で使用する必要がありますか?

76
user2471133

In Bootstrap 2.xx Glyphyicons were画像形式なので、サイズを大きくしたり、色を変更したり、背景色を変更したりすることはできませんしかし、font-awesomeは、サイズ、色、ドロップシャドウ、CSSのパワーで実行できるあらゆるものを即座にカスタマイズできるスケーラブルなベクトルアイコンを提供します。

Font-awesomeは、Glyphyiconsの代替品であり、新しいアイコンで時々更新されます。 FatとMdoは、Glyphyiconsの代替としてbootstrapバージョン3にFont-awesomeを統合することを計画しています。

私の提案は、bootstrap font-awesomeを使用することです。最初にbootstrap= css、次にFont-awesome cssを含めると、Glyphyiconsがfont-驚くばかり。

[〜#〜] update [〜#〜]

bootstrap version 3.x.xグリフィコンはフォント形式になり、12pxのフォントサイズでもきれいにレンダリングされます。 fontawesomeの最新バージョン、つまり4.01を使用している場合、両方のグリフィコンとfontawesomeを使用できます。

66
Ravimallya

素晴らしいフォント:-150以上のアイコン-デフォルトで完璧なピクセルbootstrap=フォント(14px)-アイコンのサイズは同じではなく、各アイコンの位置合わせにはカスタムcssが必要です-箇条書きリスト、回転( css3)、積み上げアイコン、スピナーアニメーション(手動で追加可能)で追加できます。グリフィコン:-より少ないアイコン-より大きなフォントサイズ(16px)でのピクセルパーフェクト-同じサイズのアイコン

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

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

28
Neo

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ダウンロードしてグリフィコンなしで入手してください。

12
tommaso capelli