MonacaクラウドIDEで作成したOnsen UIのプロジェクトからFont Awesomeのバージョン５のアイコンを使いたくて調べてみました。MonacaクラウドIDEもFont Awesomeもひさしぶりにさわったのですが、いつの間にか進化していて戸惑いました。諸行無常を感じます。
Note
- 本記事で利用するFont Awesomeのバージョンは5.0.13です。
- MonacaクラウドIDEはバージョンが分からなかったのですが、2018/6時点のものになります。
- Font Awesomeのファイルについて、記事ではminify(コード圧縮)されたファイル（.min.css）を使用していますが、minify無しのファイルに読み替えても差し支えありません。
Font Awesome 5
Font Awesomeはバージョン５から使い方が変更されたようです。私は今頃気が付きました。公式サイトをざっと見たところ使い方が４種類あるようです。
- Web Fonts with CSS
- SVG with JS
- Desktop Use
- Advanced
公式サイトの「How to Use」のページではSVG with JavaScriptにお勧めマークRECOMMENDEDがついています。SVGはベクター画像なので解像度の違いで拡大縮小が発生してもきれいに表示できるという利点があります。
このほかに変更された点は、アイコンが４種類のスタイルを持ったことです。
- Solid
- Regular
- Light
- Brands
これらのスタイルはそれぞれ対応するクラスを指定して利用します。これまではfaクラスを指定していましたが、バージョン５からはスタイルに合わせてfas、far、fal、fabクラスを指定することになります。
ちなみにRegularは一部有料版、Lightはすべて有料版のようです。無料で利用したい場合はアイコン名だけではなく、スタイルが利用可能かどうかを確認する必要があります。公式サイトの「Icons」のページでは、左側のメニューからSolidなどのスタイルや無料（Free）、有料（Pro）の絞り込みをすることができます。
MonacaクラウドIDE
Onsen UIのプロジェクトを作成すると既にFont Awesomeの設置と読み込みの記述がされているため、自分でlinkなどの記述をしなくてもFont Awesomeを利用できる状態になっています。
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
/*! onsenui - v2.10.1 - 2018-06-08 */
@import url("ionicons/css/ionicons.min.css");
@import url("material-design-iconic-font/css/material-design-iconic-font.min.css");
@import url("font_awesome/css/font-awesome.min.css");
* Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
Font Awesomeのバージョンは4.7.0のようです。
Font Awesome 5の導入例
Font Awesome 5を使うために調べたことや作業の過程をご紹介します。やりかたはたくさんあると思いますので、ほんの一例として見て頂けたらと思います。
（１）デフォルト設置のFont Awesome 4.7.0の削除
基本的に外部のJavaScriptやCSSのライブラリをプロジェクトへ追加・削除したいときは、MonacaクラウドIDEの設定メニューにある「JS/CSSコンポーネントの追加と削除…」から行いますが、デフォルトで設置されているFont Awesomeはcomponentsフォルダではなくlibフォルダのほうにあり、この設定画面では認識されず削除することができません。
そこで手動で削除します。消し残しがあるとトラブルの元になるので慎重に。編集メニューのプロジェクト内検索で「font_awesome」を検索してみます。すると以下の３か所がヒットしました。
- /www/lib/onsenui/css/onsenui-fonts.css
- /www/lib/onsenui/css/onsenui.min.css
- /www/lib/onsenui/css/onsenui.css
プロジェクト内でFont AwesomeにふれているのはOnsen UIのCSSファイルだけのようです。「onsenui-fonts.css」、「onsenui.min.css」を検索すると一つもヒットしないため、この２ファイルは現在使われていないようです。
onsenui.cssを開き、Font Awesomeを読み込んでいる行をコメントアウトします。今回はついでということで他のWebフォントを読み込んでいる行もまとめてコメントアウトしました。
/*! onsenui - v2.10.1 - 2018-06-08 */
/*
@import url("ionicons/css/ionicons.min.css");
@import url("material-design-iconic-font/css/material-design-iconic-font.min.css");
@import url("font_awesome/css/font-awesome.min.css");
*/
次にWebフォントの本体をフォルダごと削除します。
- /www/lib/onsenui/css/font_awesome
- /www/lib/onsenui/css/ionicons
- /www/lib/onsenui/css/material-desigh-iconic-font
（２）Font Awesome 5の設置
今回はさくっと簡単に表示したいので、これまでと同じ匂いのするWeb Fonts with CSSの方法を使います。
Font Awesomeの読み込みはCDNを利用する方法とファイルをサーバにアップロードして行う方法がありますが、今回はオフラインでも安心なアップロードする方法にします。
MonacaクラウドIDEの「JS/CSSコンポーネントの追加と削除…」を使用するとライブラリの設置が簡単にできます。とても便利なのですが、その代わり余計なファイルがたくさんくっついてくるため、今回は手動で行います。
「JS/CSSコンポーネントの追加と削除…」を実行した場合
今回必要なのはweb-fonts-with-cssのなかの数ファイルのみ。不要なファイルやフォルダをIDE上でひとつひとつ削除するのがちょっとめんどいです。APKを構築するためのビルド機能に、実際に使われている関数やCSSのみ抜き出すリンカのような仕組みがあれば不要なファイルを気にしなくていいと思うのですが。
まず、Font Awesomeの公式サイトのトップページからファイルをダウンロードします。「Download Free」ボタンを押すとfontawesome-free-5.0.13.zipというファイルがダウンロードされます。
https://fontawesome.com/
ダウンロードしたZIPファイルを解凍します。ここから必要なファイルだけプロジェクトに追加します。今回はバージョン5.0.13で追加された「かえる」のアイコン（fa-frog）を表示してみます。スタイルはSolidです。
今回必要なファイルは以下の７つになります。
web-fonts-with-css/cssフォルダ内
- fa-solid.min.css
- fontawesome.min.css
web-fonts-with-css/webfontsフォルダ内
- fa-solid-900.eot
- fa-solid-900.svg
- fa-solid-900.ttf
- fa-solid-900.woff
- fa-solid-900.woff2
fa-solid.cssの中身を覗いてみると、@font-faceで指定しているフォントファイル（eot, svg, ttf, woff, woff2）へのパスが一階層上の「webfonts」という名称のフォルダを指しています。
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
src: url("../webfonts/fa-solid-900.eot");
src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
そこで、MonacaクラウドIDE上でlibフォルダの下にfontawesomeフォルダ（名称任意）を作成し、そのなかにcssフォルダ（名称任意）と「webfonts」フォルダを作成します。
次に、それぞれのフォルダに前述のファイルをアップロードします。
アップロード完了
Note
Onsen UIをアップデートした場合、onsenui.cssでFont Awesomeをimportしている行を再度コメントアウトする必要があります。Font Awesome本体も復活すると思います。これらのパスはcomponents/loader.cssによりwww/components側に変わると思われるので確認が必要です。
（３）Font Awesome 5の読み込み
index.htmlから、文字コードを格納しているfontawesome.min.cssと、@font-faceを記述しているfa-solid.min.cssを読み込みます。
<link rel="stylesheet" href="lib/fontawesome/css/fa-solid.min.css">
<link rel="stylesheet" href="lib/fontawesome/css/fontawesome.min.css">
i要素でfasクラスとfa-frogクラスを指定してFont Awesomeのバージョン５のアイコンを表示させてみます。今回は実験的にons-iconコンポーネントも使ってみます。
<i class="fas fa-frog" style="font-size: 100px; color: green"></i>
<ons-icon icon="fa-frog" size="100px" style="color: green"></ons-icon>
Monacaデバッガで撮ったスクショ
表示することができました！
ons-iconコンポーネント使用時の注意点
ons-iconコンポーネントを使う場合はファイルを読み込む順番に注意が必要です。ons-iconコンポーネントはons-iconクラスとfaクラスを生成します。ここで問題になるのがfont-weightプロパティの上書きです。
ons-iconクラスではFont Awesomeのスタイルを分類するfont-weightプロパティをnormalに設定します。
.ons-icon {
display: inline-block;
line-height: inherit;
font-style: normal;
font-weight: normal;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
normalの値は「400」ですが、これはRegularスタイルと同値になります。
.fa,
.fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900; }
.far {
font-family: 'Font Awesome 5 Free';
font-weight: 400; }
つまり、ons-iconコンポーネントではons-iconクラスによるRegularスタイルの指定とfaクラスによるSolidスタイルの指定が混在していることになります。
かえるの実験ではFont Awesomeのファイルを読み込んだ後にonsenui.cssを読み込んでいました。このケースでは、font-weightが「normal」となりRegularスタイルを指定したことになりますが、Regularスタイルのフォントファイルを読み込んでいないためウェイトのフォールバックでSolidスタイルのフォントファイルが使われたと考えられます。もしRegularスタイルのフォントファイルも一緒に読み込んでいた場合は、farクラスを指定していなくてもRegularスタイルのアイコンが表示されるという怪奇現象になりますし、Regularスタイルに非対応のアイコンであれば表示すらされません。
ons-iconコンポーネントを使うのであれば、onsenui.cssを読み込んだ後にFont Awesomeのファイルを読み込むことで、ons-iconクラスによるfont-weightの上書きを防げます。また、SolidスタイルとRegularスタイルのフォントファイルを一緒に読み込むときは、fa-solid.cssを読み込んだ後にfa-regular.cssを読み込むことでfaクラスによるfont-weightの上書きを防げます。
以下にons-iconコンポーネントを使用してSolidスタイルとRegularスタイルのアイコンを表示する例を示します。（Regularスタイル用のファイル一式を追加でアップロードしています）
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
<link rel="stylesheet" href="lib/fontawesome/css/fa-solid.min.css">
<link rel="stylesheet" href="lib/fontawesome/css/fa-regular.min.css">
<link rel="stylesheet" href="lib/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="css/style.css">
<ons-icon icon="fa-bell" size="100px" style="color: yellow"></ons-icon>
<ons-icon icon="fa-bell" size="100px" style="color: yellow" class="fas"></ons-icon>
<ons-icon icon="fa-bell" size="100px" style="color: yellow" class="far"></ons-icon>
Monacaデバッガで撮ったスクショ
表示はできましたが、本来不要であるファイルの依存関係ができてしまいました。私はこのやり方を忘れる自信があります。
まとめ
- 現在のOnsen UIのプロジェクトではFont Awesomeのバージョン4.7.0が使われている
- Awesomeのバージョン５を使う場合は、重複を防ぐためバージョン4.7.0を削除する（読み込みはonsenui.cssで行われている）
- Font Awesomeのスタイル定義ファイル（fa-solid.cssなど）では、一階層上の「webfonts」フォルダへのパスが使われているので注意
- 現時点ではons-iconコンポーネントはとりあえずi要素に変更したほうが安心
- 開発環境やツールなどの変化は速いのでたまにさわっておいたほうがいい
