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

JavaScriptのトランスパイルについて

今回はJavaScriptのトランスパイルについて。 JavaSciprtではwebpackでコンパイルなどをする時に同時にトランスパイルという処理を行います。 トランスパイルとは? 主にES2015 …

no image

JSリンク集+git ブランチ指定 clone

現状の私の課題としてUIに対する意識が甘いということが上げられます。 大昔のサイトで使っているようなわかりにくいUIをそのまま使っているんですよね。 UIといってもいろいろな要素が必要となってきますが …

no image

Promiseを使った非同期処理

今回はPromiseを使った非同期処理について。 JavaScriptでの非同期処理ですが、処理1、処理2があった場合、よく言われるコールバック地獄になってしまいます。うまく関数化すればそうでもない気 …

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

ケース別JavaScriptライブラリまとめ

Webエンジニアとしてはサーバーサイドのプログラムのみならず、JavaScriptをいじることがおおいでしょう。 私自身、昔はわけがわからず大嫌いだったんですが、最近はデバッグが楽なこともあり、結構愛 …