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

switch(true)イディオム

switch文は通常、文字や数字で分岐をさせることが多いですが、実は条件式を入れることも可能です。 私の場合、正規表現を動的に変えたいケースがあり、検索したところ似たケースがありました。 【JavaS …

no image

AngularJSでのinfite_scroll

今回もAngularネタです。 一般的なデータの一覧画面ではページャーをボタンで移動するのではなく、スクロールするだけで次々とアクセスできるようになるのが一般的でしょう。 facebookやtwitt …

no image

Angularでのfilter

今回はAnuglarでよく使うfilterという機能です。 使いどころとしては入力フォームに対応させて表示項目を絞る、みたいな使い方が一般的かと思います。 一番簡単なものとしては配列があり、入力値にあ …

no image

JavaScriptでのオブジェクト指向 クラス作成&インスタンス生成

JavaScriptというと一般的にはjQueryを使って画面の装飾をするスクリプト言語という認識が一般的かと思います。 しかし、JavaScriptでもPHPなどのようにオブジェクト指向的な思想は実 …

no image

静的解析ツールについて

  ある程度の規模のプロジェクトだったら使っているであろう静的解析ツールについて。 Contents1 PHP CodeSniffer2 JavaScript eslit3 C# Style …

アーカイブ