TwitterBootstrapのFontAwesome vs Glyphicons


81

私はWeb開発の初心者で、最近Twitter Bootstrapを使い始めました。これは、すでに使用方法を知っているGlyphiconsを使用していることを知っています。しかし、Bootstrap用に構築されていると言っているFontAwesomeにも出くわしました。

2つの違いは何ですか?つまり、一方が他方の代替手段ですか?それとも、別の場所でそれらを使用する必要がありますか?

回答:


66

Bootstrap 2.xxでは、グリフィコン画像形式であったため、サイズを大きくしたり、色や背景色などを簡単に変更したりすることはできません。ただし、font-awesomeは、サイズ、色、ドロップシャドウなど、CSSの力で実行できるあらゆるものを即座にカスタマイズできるスケーラブルなベクターアイコンを提供します。

Font-awesomeは、新しいアイコンで随時更新されるGlyphyiconsの代替手段です。FatとMdoは、Glyphyiconsの代わりとしてFont-awesomeをブートストラップバージョン3に統合することを計画しています。

私の提案は、font-awesomeでブートストラップを使用することです。最初にブートストラップcssを含め、次にFont-awesome cssを含めて、Glyphyiconsがfont-awesomeによってオーバーライドされるようにします。

更新

では、ブートストラップバージョン3.xxのglyphiconsでも12ピクセルフォントサイズできれいにレンダリングされますフォントフォーマット、となります。最新バージョンのfontawesome、つまり4.01を使用している場合は、fontawesomeで両方のグリフィコンを使用できます。


19
+1ですが、FontAwesomeとの統合はBootstrap3に実装されていません。FAは、Bootstrap 2をすぐにサポートすることを除いて、Twitterと正式に提携していません。ブートストラップをサポートするさまざまなフォントアイコンパックの比較を次に示します
jrhorn424 2013年

2
更新:Bootstrap4はGlyphiconを出荷しなくなりました。
MushyPeas 2016

FontAwesomeによると、商用利用でも100%無料です。グリフィコンにはいくつかの制限があります:「グリフィコンハーフリングは通常無料では利用できません」。「グーグルマテリアルフォント」についてはわかりませんが、一部の製品(jsチャートモジュール)では、自分でホストすることはできず、CDNからのみリンクできます。
アンドレイ

素晴らしいフォントが付属しているベクターアイコンを使用する利点は何ですか?グリフィコンに使用される画像の種類は何ですか?
Monojit Sarkar 2018年

@Ravimallyaは、グリフアイコンのサイズと色は変更できないとおっしゃいました。私はあなたがこれをどのような文脈で言ったかわかりません。サイズと色が変わる可能性があることがわかりました。ここに例があります----->グリフアイコンの色を変更する->いくつかのサンプル<spanclass = "glyphicon glyphicon-user" style = "color:blue"> </ span>サイズも増やすことができます。ここにstackoverflow.com/a/24960243/6188148を
Monojit Sarkar 2018年

28

Font Awesome:-150以上のアイコン-デフォルトのブートストラップフォント(14px)で完璧なピクセル-アイコンは同じサイズではなく、整列するためにそれぞれにカスタムcssが必要です-箇条書き、回転(css3で追加可能)、スタックアイコンがあります、およびスピナーアニメーション(手動で追加できます)グリフィアイコン:-アイコンが少ない-大きいフォントサイズ(16px)でピクセルパーフェクト-同じサイズのアイコン

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

Bootstrap用に作成された人気のあるアイコンフォントを並べて比較します。


12

Font awesomeは、特定のフォントといくつかのcssを使用して「魔法」を作成することによって取得されるベクターアイコンのコレクションです。Glyphiconsはスプライト-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

どうやって ?あなたのリンクは、ベクトル的な方法でグリフィコンを使用するための情報を提供していますか?
トランテ2013年

4
Twitter Bootstrapの新しいグリフィコンは、すでにベクター形式になっています。
tommaso capelli 2013
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.