ページ目次
Font Awesomeを読み込むにはどうすればいいか
Webサイトやアプリのユーザビリティ向上には欠かすことのできないアイコン。
その中でもアイコンをフォント形式で読み込み、表示してくれるFont AwesomeはWeb製作の上で必須サービスとなっているのではないでしょうか。
今回、最近流行りにのって使い始めたwebpackでFont Awesomeを組み込むにはどうしたらいいのか、手探りながら試してみました。(webpack2.0以上を使用)
font-awesome-webpackを使う
結論から言うと、「font-awesome-webpackを使う」です。こんなありがたいものを公開してくれている人がいました。感謝です。
npm: font-awesome-webpack
Font Awesomeを使うための基本的な設定を記述してくれています。これをnpmでインストールします。
必要となるnpmモジュール
- font-awesome
- font-awesome-webpack
- style-loader (※font-awesome-webpackの依存関係でインストールされる)
- css-loader (※同上)
- less-loader (※同上)
- url-loader
- file-loader
- less
style-loaderとcss-loader、さらにless-loaderについては、font-awesome-webpackの依存関係で指定しなくてもインストールされますが、念のため。
// ついでにfont-awesome本体もインストール
$ npm install --save-dev font-awesome font-awesome-webpack url-loader file-loader style-loader css-loader less-loader
// font-awesomeのlessファイルを使っているのでlessがお使いの環境にインストールされていないようであればインストールしましょう
$ npm install --save-dev less
loader記述部分でフォントファイルの読み込みを設定
webpack.config.jsのloader部分に、フォントファイル一式(.woff, .woff2, .eot, .ttf, .svg)をwebpackに読み込ませるよう記述します。
同時に読み込むファイル形式も追加します。
// webpack.config.js
// fontファイル形式を追加
resolve: {
extensions: ['.js', '.coffee', '.webpack.js', '.web.js', '.scss', '.woff', 'woff2', '.ttf', '.eot', '.svg']
},
// loader記述部分
module: {
rules: [
{ test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/font-woff' },
{ test: /\.(ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, use: "file-loader" }
]
}
使いたいアイコンを限定したりなども可能ですが、設定するのも面倒くさいので(爆)、すべて使用することにします。その際は、エントリーポイントとなるJavaScriptファイルでfont-awesome-webpackを呼び出すだけです。
// main.js
import "font-awesome-webpack";
これでwebpackコマンドを実行すると、フォントファイルが書き出され、HTML上でwebフォントとしてFont Awesomeアイコンが使えるようになります。
フォントファイルの読み込みエラーが出たので
上述のとおり作業し終わって、いざサイトをブラウザで開いてみると、読み込みエラーが出て、webフォントが読み込まれていませんでした。
コンソールで確認してみると、読み込み先が「localhost/フォントファイル名」のroot直下になっています。しかし、webpackによってフォントファイルが書き出されたのは「assets」ディレクトリ以下(あくまでも自分の設定下では。ここはoutput.pathで指定)です。
publicPathを設定する
上述の読み込みエラーは、webpack.config.jsのoutputにpublicPathを設定することで修正できました。
output: {
// ファイルの書き出し先
path: path.join(__dirname, "assets"),
// 外部ファイルの読み込み先の指定
publicPath: "/assets/"
}
“Font Awesomeをwebpackに読み込んでくれるnpmパッケージ” への2件の返信
コメントは受け付けていません。