skillup

技術ブログ

JavaScript

font-awesomeのインストール(タスクランナー経由)

投稿日:2017年12月17日 更新日:

fontawesomeをタスクランナー経由でインストールすることについて。

CDNでインストールするだけならURL張り付けるだけですが。

インストール

まずnpmで下記コマンドでインストールをします。

webpack.mix.js

lessを例に出してますが、sassでももちろん問題ありません。

あとはHTML側でfontawesomeのタグを入れます。

チェック点

  • 画面を読み込んだとき、CSSがよみこまれているか
  • Fontの画像データ(eot,svg,ttfなど)がよみこまされているか

画像データはディレクトリにあるのに読み込まれないときはapacheやnginxなどの画像サーバーで読み込まされているかの確認もしておきましょう。
参考リンク

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

Font Awesomeをwebpackに読み込んでくれるnpmパッケージ

Font Awesomeの使い方が初心者でもわかる!ダウンロードから設定方法まで

-JavaScript
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Angular複数ファイルでの読み込み

Angularでいろいろな処理を書いているんですが、処理が膨らんでくると1つのファイルに全ての処理を書いていては当然非効率になります。 ざっくり分けると ほとんどの処理に共通な処理を集めたファイル 特 …

no image

vueのコンポーネント化

vueの記事をポツポツ上げてきましたが、コンポーネント化した書き方に関して。 既存のvueの記事 Vue.jsについて vueの環境構築 今まではCDNで読み込んだり、HTMLの中に直接vueを入れて …

no image

AngularJSでのHtmlFormオプション+Filter

AngularJSにてHTMLのFormオプションの書き方など。 Contents1 HTMLオプション1.1 プルダウン1.1.1 配列型1.1.2 ラベル型1.2 チェックボックス1.3 ラジオ1 …

no image

AngularJSについて

前回のbowerの記事でちょこっと書きましたが、最近はAngularJSというJavaScriptのフレームワークを触っています。 数年前から流行りだしているようで、少しずつ使っている方も増えているの …

no image

vueの環境構築

vueについて勉強したことなどを。 Contents1 vueとは?1.1 方法1 CDN1.2 方法2 npm+コンパイル vueとは? 近年のJavaScriptフレームワークの一種で「双方向デー …

アーカイブ