2016-06-11 6 views
1

スピナーアイコンを表示するにはfont-awesomeが必要です。font-awesomeの一部のみを含む

私は完全なフォント素晴らしいライブラリを含めることができます。しかし、それはちょうど1つのアイコンのための過度ではないでしょうか?アイコンやコンポーネントを1つだけ含める方法はありますか?問題は、ライブラリが異なるファイルにモジュール化されていないようです。たとえば、scssを使用している場合、すべてのアイコンは、それぞれのファイル内の各アイコンではなく、_icons.scssファイルにあります。純粋なCSSを使用している場合、すべてが1つのファイルにあります。

+0

あなたはCDNについて聞いたことがありますか? – dippas

+1

FontAwsomeは最終的にフォントなので、特定のフォントの 'Q'、' n'、 'L'だけを使うことができないように、そのフォントのいくつかのアイコンだけを使うことはできませんおそらくあなたは何とかすることができますが、それは完全な過労です)。しかし、それはかなり軽量であり、演奏に劇的な影響を与えないでしょう。特にCDNを使ってフォントをキャッシュする場合は、特に –

+0

ですが、fontawesomeのSVG版があるので、 "文字" 。それでも、私はそれが大きなフォントのフォント(とクラス)をロードするだけのカップルの画像を使用することだと思います。 – LordNeo

答えて

2

できません。フォントは、イメージやドキュメントによく似た単一のファイルです。どのようにCSSに含めるかは関係ありません。ユーザーは引き続きフォントファイル全体をダウンロードします。 CSSの定義では、あなたのWebサイトでフォントを利用できるようになります。

代替手段としてできることがいくつかあります。カスタムアプリケーション(たとえば、https://icomoon.io/など)を使用して部分的なフォントセットを生成できる企業もあります。それはあなたのニーズに合うかもしれません。しかし、いったんフォントのカスタムバージョンを作成すると、それでも分割できないファイルになります。それでも、icomoonのカスタムバージョンは非常に小さく、合理化され、あなたが記述したシナリオに適合する可能性があります。

フォントを自分でホストするのではなく、ユーザーによってキャッシュされる可能性が高いクラウドベースのフォントを使用することもできます。それ自体は解決策ではありませんが、ユーザーがあなたのサイト専用のフォントをダウンロードする必要はないというチャンスが幾分増えます。

+0

これは、素晴らしいフォント4と5番目のバージョンを使用する唯一の方法素晴らしいフォント5の合字にのみ関連しています。 – Steve

1

フォント素晴らしいV5はgetting-startedページ(https://fontawesome.com/get-started/web-fonts-with-css)で、あなたが最初にこの基本的なファイルが含まれる可能性があり、部分的なスタイルをサポートしています:

<link href="https://use.fontawesome.com/releases/v5.0.2/css/brands.css" rel="stylesheet"> 
<link href="https://use.fontawesome.com/releases/v5.0.2/css/regular.css" rel="stylesheet"> 
<link href="https://use.fontawesome.com/releases/v5.0.2/css/solid.css" rel="stylesheet"> 
+0

これは良いですが、私はこれらのCSSファイルのそれぞれから1つまたは2つのアイコンを使用します。それはまだクライアントのために多くの未使用のCSSとデータをダウンロードして残しています。より良い方法があるはずです。私はwebpackや何かが仕事を得ることができるかと思う。 – Steve

関連する問題