2016-04-14 11 views
1

同じページにすべてのjsとhtmlを含む単一のページhtmlアプリケーションを作成する必要があります。フォントの素晴らしいライブラリとアイコンを単一のhtmlに入れて使用できる方法はありますか?私のページは角度に基づいています。私は多分にbase64エンコードまたはFAアイコンのSVG形式を使用して何かに変換する必要があり1つのhtmlに埋め込みフォントのすばらしいアイコン

<div><i class="fa fa-{{data.icon}} fa-{{styling.iconSize}}" style="color:  {{styling.iconColor}}"></i></div> 

:私のようなFAアイコンでHTMLSを取得します。

答えて

0

Getting Started」 - ページには、CSSを含めるさまざまな可能性が記載されています。いくつかのアイコンと驚異的なパフォーマンスが必要な場合は、FortAwesomeプロジェクトを見て、あなたのページにアイコンのサブセットを含めることができます(有料)。

1

をご覧ください。あなたが記述していることを実行し、あなたの単一ファイルを膨らませるのがはるかに簡単な方法です。

実際に使用しているアイコンのみを選択し、カスタムジップをダウンロードすることができます。

ジップ内には、名前に「埋め込み」のあるCSSファイルがあります(少なくとも、この記事の執筆時点では、それを含んでいます)。そのファイルの内容をコピーして、タグ間の単一ファイルのHTMLページに貼り付けることができます。

そうでなければ、base64はフォントファイルをエンコードし、url()定義内のフォントURLの代わりに置きます。 (例:URL(:; 'データアプリケーション/ octet-streamとbase64で、_THE_BASE64_HERE_')

ここでは、私が過去に使用したBASE64変換器へのオンライン・ファイルです:https://jpillora.com/base64-encoder/

しかし、あなたが本当にしている場合この1ページのWebサイトのアイデアにgulp(または同様のビルドツール)を使用し、https://www.npmjs.com/package/gulp-base64のようなものを使用することをお勧めします。これは、cssファイルを自動的に処理し、参照されるファイルをBase64でエンコードされたインラインデータで置き換えます。物事を分けて一つのファイルにすることができます。