目次
- インストールは「Sass(SCSS)」で
- インストール手順
- 1. ファイルをダウンロードして解凍
- 2. scssフォルダを understrap-child\src\sass にコピーして名前を「fontawesome5」に変更
- 3. 「webfonts」フォルダの中身を understrap-child\fonts にコピー
- 4. understrap-child\sass\assets に font-awesome5.scss を作成
- 5. understrap-child\sass\child-theme.scss で4の font-awesome5.scss をインポート
- 6. understrap-child\src\sass\fontawesome5\_variables.scss の $fa-font-path を変更
- 7. gulp styles でコンパイル → デプロイ
- まとめ
インストールは「Sass(SCSS)」で
インストールの仕方はたくさんあります。Start | Font Awesome
一番簡単なのはCDNなのですが、「Understrap-child」ではSass(SCSS)で「Font Awesome 4」をインストールしているのでそれに従いたい。また、他のファイルで「Font Awesome 4」の設定を流用しているみたいなので出来れば同居させたい。そんなの出来るのか？やっていいのか？と思いましたが結果的に出来たので良しとします。
インストール手順
基本的には公式ドキュメントのこのページに従ってインストールします。Sass | Font Awesome
- ファイルをダウンロードして解凍
- scssフォルダを
understrap-child\src\sassにコピーして名前を「fontawesome5」に変更 - 「webfonts」フォルダの中身を
understrap-child\fontsにコピー understrap-child\sass\assetsにfont-awesome5.scssを作成understrap-child\sass\child-theme.scssで4のfont-awesome5.scssをインポートunderstrap-child\src\sass\fontawesome5\_variables.scssの$fa-font-pathを変更- gulp styles でコンパイル → デプロイ
1. ファイルをダウンロードして解凍
ドキュメントの一番上にダウンロードボタンがあるのでそれをクリックして適当なフォルダにダウンロード。解凍しておきます。
2. scssフォルダを understrap-child\src\sass にコピーして名前を「fontawesome5」に変更
名前は適当で良いですが、すでに「Font Awesome 4」用のフォルダ「fontawesome」が存在しているのでそれと被らないようにしてください。
3. 「webfonts」フォルダの中身を understrap-child\fonts にコピー
ここがポイントです。このフォルダの場所をあとで _variables.scss に設定することになるのですが、「Font Awesome 4」と「Font Awesome 5」とで同じ設定値を使うので別の場所に置くとどちらかが動かなくなってしまうんですね。幸い中身のファイル名は被っていないのでコピーして大丈夫です。
4. understrap-child\sass\assets に font-awesome5.scss を作成
中身はこんな感じです。@import "../../src/sass/fontawesome5/fontawesome.scss";
@import "../../src/sass/fontawesome5/solid.scss";
@import "../../src/sass/fontawesome5/brands.scss";
@import "../../src/sass/fontawesome5/regular.scss";5. understrap-child\sass\child-theme.scss で4の font-awesome5.scss をインポート
以下を追記。@import "assets/font-awesome5";6. understrap-child\src\sass\fontawesome5\_variables.scss の $fa-font-path を変更
「Font Awesome 5」の設定を「Font Awesome 4」に合わせます。「Font Awesome 4」の設定はたぶんこうなっているはず。$fa-font-path: "../fonts" !default;7. gulp styles でコンパイル → デプロイ
あとはコンパイルしてサーバにデプロイしたら終わりです。こんな感じで「Font Awesome 5」のアイコンが表示出来ます。「Font Awesome 4」のアイコンを表示してみるとこんな感じ。
まとめ
「Understrap」を使っている人にしか関係ない話なので需要があるとは思えませんが、メモ代わりに。ちなみに「Understrap」を使っているのではなく普通に「Font Awesome」を使うのであれば、npmとかで入れた方がアップデートも簡単だしスマートだと思います。これもそれでやりたかったんですけど、なかなか上手く行かなかったのでファイルを手動でダウンロードしてくる形になりました。あんまりスマートじゃないけどまあよし。
