2013-06-26 15 views
69

私はWeb開発の初心者で、最近Twitter Bootstrapで作業を始めました。私はすでに使用方法を知っているGlyphiconsを使用しています。しかし、私はまた、Font Awesomeに出くわしました。これは、それがブートストラップ用に作られていると言います。フォントAwesome vs Glyphicons in Twitter Bootstrap

2つの違いは何ですか?私は他のもののための1つの代替手段ですか?それとも別の場所で使うべきですか?

答えて

12

フォントawesomeは特定のフォントといくつかのCSSを使って "マジック"を作ることによって得られるベクトルアイコンの集まりです.Glyphiconsはsprite-cssテクニックを使用します。
両方を使用できます。ブートストラップの後に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を行くとglyphiconsせずにそれを得るためにあなたのブートストラップのダウンロードをカスタマイズする必要があり、単にフォント素晴らしいものを持ってしたくない場合。ブートストラップ2.x.xで

+13

ブートストラップに付属しているグリフィコンには、現在のフォント方法も使用されています。 http://getbootstrap.com/components/#glyphicons – Neo

+0

?あなたのリンクはグリフコンをベクトル的に使うための情報を与えますか? – trante

+4

Twitterブートストラップ用の新しいグリフコンは、すでにベクトル形式です。 –

60

Glyphyicons は、画像フォーマットのた、したがって、あなたが簡単になど、サイズを大きく、色を変更、背景色ができません。しかし、font-awesomeは、大きさ、色、ドロップシャドウなど、CSSの機能を使って行うことができるものを、即座にカスタマイズできるスケーラブルなベクターアイコンを提供します。

Font-awesomeはGlyphyiconsの代わりに、新しいアイコンで時折更新されています。 FatとMdoは、Glyphyiconsの代わりにBootstrapバージョン3にFont-awesomeを統合する予定です。

あなたの提案は、font-awesomeでブートストラップを使用していることです。まず、ブートストラップのCSSとFont-awesome cssが含まれているので、Glyphyiconはfont-awesomeによって上書きされます。 12ピクセルフォントサイズにうまくレンダリングするフォント形式になるブートストラップバージョン3.x.x glyphiconsにおいて

UPDATE

。 fontawesomeの最新バージョン(4.01)を使用している場合は、両方のグリフコンをfontawesomeで使用できます。

+17

+1ですが、Font Awesomeとの統合はBootstrap 3では実装されていませんでした.FAはBootstrap 2をサポートしていない以外はtwitterと正式に提携していません。ブートストラップをサポートする[異なるフォントアイコンパックの比較](http://tagliala.github.io/vectoriconsroundup/)があります。 – jrhorn424

+1

@ jrhorn424、これは素晴らしい比較チャートです!ありがとう! – KyleMit

+0

更新:ブートストラップ4は、グリフィコンをもう発送しません。 – MushyPeas

25

素晴らしいフォント: - 150以上の複数のアイコン - デフォルトのブートストラップのフォント(14px) で完璧なピクセル - アイコンが同じサイズを持ち、各 を整列させるためのカスタムCSSを必要としませんが - リストを箇条書きしており、回転(することができます参照同じサイズのアイコン

- より大きなフォントサイズ(16pxに) の画素パーフェクト - 閉じるアイコン - : http://tagliala.github.io/vectoriconsroundup/ Glyphyicons)が積層されたアイコンが、)CSS3を添加し、そしてスピナーアニメーション(手動 加えることができること

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

5

この質問をさらに更新するだけでさらに役立ちます。

2016年にトレンドはグーグルの素材のフォントです。彼らは絵文字やフォントよりもうれしいですが、一見綺麗に見え、使用するアイコンが350以上あります。無料配布:https://design.google.com/icons/

フラットアイコンと素材デザインを使用することの利点をいくつか挙げることができます。マテリアルデザインは、あなたのAndroid APPに素晴らしい利点をもたらします。マテリアルデザインは、Android L OS(Android 5.0)でGoogleが開発した視覚的デザインフレームワークです。マテリアルデザインフレームワークは、すべてのアンドロイドプラットフォームで動作し、フラットなグラフィカルインタフェースをサポートしています。 Googleの新しいビジュアルデザインフレームワークは、フラットでエレガントで、活気に満ちており、統合されたAndroidのエクスペリエンスを作り出しています。

ブランド名 素材デザインは、平らで軽いものを使用しています。 APP全体をブランド化するには、わずか2〜3色が必要です。材料設計は、開発したAPPをブランド化するのが簡単です。

ユーザーエンゲージメント ユーザーの関与は非常に重要です。あなたは、あなたのAPPを通じて常にユーザーとコミュニケーションをとらなければなりません。ユーザーの関与は成功の鍵となる要因の1つです。スマートフォンAPPSの35%はAPPをインストールしたユーザーの生涯で一度だけ使用されます。マテリアルデザインは、ユーザーとユーザーの間で視覚的な言語を提供します。

BETTER UI/UXは UI/UXは、あなたとユーザー間のコミュニケーションの媒体です。 UIが正しくないと、ユーザーはAPPをアンインストールします。

マテリアルデザインがユーザーエクスペリエンスを担当します。ユーザーと深く関わっています。材料設計は応答性があり、意義のある相互作用である&です。あなたのアプリでマテリアルデザインを統合することで、ユーザーを楽しませることができます。

+1

マーケティング用の吹き出し – Savage

+0

また、メモリの方がはるかに高価です – JustinJmnz

関連する問題