投稿者: senmyou

MonacaクラウドIDEで作成したOnsen UIのプロジェクトからFont Awesomeのバージョン５のアイコンを使いたくて調べてみました。MonacaクラウドIDEもFont Awesomeもひさしぶりにさわったのですが、いつの間にか進化していて戸惑いました。諸行無常を感じます。

• モバイルアプリ開発環境 – Monaca
• アイコンフォント – 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コンポーネントの追加と削除…」を使用するとライブラリの設置が簡単にできます。とても便利なのですが、その代わり余計なファイルがたくさんくっついてくるため、今回は手動で行います。

まず、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 {
  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;
}

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }

<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>

まとめ

• 現在のOnsen UIのプロジェクトではFont Awesomeのバージョン4.7.0が使われている
• Awesomeのバージョン５を使う場合は、重複を防ぐためバージョン4.7.0を削除する（読み込みはonsenui.cssで行われている）
• Font Awesomeのスタイル定義ファイル（fa-solid.cssなど）では、一階層上の「webfonts」フォルダへのパスが使われているので注意
• 現時点ではons-iconコンポーネントはとりあえずi要素に変更したほうが安心
• 開発環境やツールなどの変化は速いのでたまにさわっておいたほうがいい