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での時計作成

今回はWebアプリで1秒ごとに更新されるデジタル時計の作成方法について。 基本的には 現在時刻を秒まで含めて表示 その関数を一秒ごとに更新 でOKです。 ネットにどんぴしゃりのサンプルが落ちていたので …

no image

PHP(DBアクセス)→HTML→Angularを実行するために

AngularJSでデータベースをつかうときには$httpや$resourceを使うことが多いですが、それ以前にAngularを読み込んでデータベースにアクセスしないことも重要かと思っています。 とい …

no image

jQuery modalダイアログについて&重複時間処理

Contents1 jqueryモーダルダイアログ1.1 あらかじめ読み込むライブラリ1.2 ソース本体1.2.1 Html側1.2.2 Javascript側1.2.3 参考リンク2 重複時間につい …

no image

JSF+ajax

JSFでajaxを使うときにいろいろと調べたのでメモ。 やろうとしたことはWEB上で給与明細の計算をしたくて、プルダウンで月の変更したら自動的に経費が該当月に替わるというシステムです。 ajaxを使う …

no image

npmでのjQueryライブラリの読み込み+datepickerメモ

npm経由でjQueryやDatepickerなど一般的なライブラリをrequireしてビルドする手法について。 以前も下記エントリーで書きましたが、再学習。 npmでのJSライブラリインストール&ビ …