IcoMoonを使ってFontAwesomeの欲しいアイコンだけ実装する詳細手順
Posted: Last Update:
サイトのアイコンをフォントで表示できる「Font Awesome」。自分の好きにアイコンだけ使いたいのにたくさんおまけがついてきて困っていませんか？この記事では、IcoMoonというWEBソフトを使って、自分の好きなフォントだけサイトに反映させる方法を詳しく紹介します。IcoMoonでファイルの軽量化もできちゃいます！
この記事の目次
Font AwesomeとIcoMoon
最初にFont AwesomeとIcoMoonについて少し説明しましょう。既にFont AwesomeとIcoMoonについて知識がある方は、次の大見出しまで読み飛ばしてください。
Font Awesomeの利点
Font Awesomeは、アイコンを文字として表示できる便利なサービスです。たとえば、このサイトのアイコンもFont Awesomeを利用しています。フォントなので、文中に「 」のように表示することもできます。
画像とは違い、大きさや色もスタイルシートで変更することができます。たとえば、色を変えてみましょう→「 」。とても便利ですね。
Font Awesomeのデメリット
便利なFont Awesomeですが、問題点もあります。Font Awesomeの使い方は、「web上にあるアイコンをページ表示の度に呼び出す方法」と、「フォントをダウンロードしてデータとして保存し、利用する方法」の二種類があります。
「web上にあるアイコンをページ表示の度に呼び出す方法」は、fontawesome.comにアカウントを作り、自分のサイトから必要なフォントをJavascriptで呼び出す手法です。自サイトにタグを入れるだけで利用できて簡単ですが、フォントの読み込みが遅くなったり、時には読み込みができないなどの問題が起こることもあります。
「フォントをダウンロードしてデータとして保存し、利用する方法」は、fontawesome.comからデータをダウンロードして自分のサイトに保存することで実現できます。Webからフォントを呼び出す方法と異なり、フォント呼び出しの遅延や停止は起こりませんが、フォントの設定ファイルが大きいという難点があります。実際に、私がダウンロードしたファイルは、CSSファイルが72kb、フォントの設定ファイルが2MBありました。CSSファイルが大きいとページの読み込みに遅延が起こる可能性があるので、あまり好ましいとは言えません。
Font AwesomeはIcomoonで軽量化できる
このような問題点を解決してくれる手法として今日ご紹介したいのが、「IcoMoon」というウェブサービスです。Font Awesomeから好きなアイコンだけ選択して自分のサイトに適用できるので、容量の軽量化を実現できます。私はIcoMoonを利用して、CSSは72kbから3kbに、設定ファイルは2MBから36kbにまで落とすことができました。ファイルを自分のサーバーに保存するので、WEB上の遅延や停止もありません。
次の小見出しからは、Icomoonを利用して、必要なアイコンだけを保存して利用する方法を詳しく解説します。
【手順1】IcomoonにFont Awesomeの設定を取り込む
Font AwesomeのフォントをIcomoonで利用するためには、IcomoonにFontAwesomeのフォントを取り込む必要があります。なお、「IcoMoon」にも独自のアイコンフォントがあります。Fontawesomeのアイコンでなくてもいい、という方は、次の大見出しまで進んでください。
Font Awesomeの設定ファイルをダウンロード
最初にfontawesome.comのダウンロードページでFont Awesomeの設定ファイルをダウンロードしておきます。
zipファイルでダウンロードされますので、必要に応じてファイルを解凍してください。
Font AwesomeをIcoMoonにアップロード
次に、IcoMoonのアプリケーションを開き、ページ上部の「Import Icons」をクリックします。
先にダウンロードしておいたFont Awesomeのファイル内の「webfonts」フォルダから、SVGファイルを選択して開きます。SVGファイルは3つあるので全て開いておきましょう（CTRLを押しながらクリックで複数選択できます）。
これでFont AwesomeのアイコンがIcoMoonで選択できるようになりました。
【手順2】IcoMoonで必要なアイコンを選択
IcoMoonに取り込んだFont Awesomeのフォントから、自分のサイトで使いたいフォントをクリックして選択します。将来的に使いそうなフォントもここで選択しておけば、フォントが足りなかった時に再度作業をする手間が省けます。
残りの作業は簡単なので、ゆっくり時間をとって必要なフォントを探しておきましょぅ。
【手順3】ウェブ用にIcoMoonの詳細を変更
必要なフォントの選択が完了したら、次は自分のサイトで利用できるように設定を行っていきます。
WEB用Fontに設定を変更する
ページ下部の「Generate Font」をクリックしてページを開き、ページ上部の「Preferences」をクリックしてください。
開いた詳細設定タブで「Support IE8」「Support IE7 & IE6」「Includes Metadata in Fonts」にチェックを入れます。CSS Selectorは「Use i (for selecting <i>)」になっていることを確認してください。選択が完了したら「X」で閉じてしまって問題ありません。
既にFont Awesomeを利用していて軽量化したい方の+設定
既にFont Awesomeを自分のサイトで利用していて、ファイル軽量化のためにIcoMoonを利用したい方は、Class Prefexを変更する必要があります。
先ほどの設定画面の上部にある「Class Prefex」を「icon-」から「fa-」に変更してください。ここを変更することで、「<i class="fa-heart"></i>」など、これまでと同じprefexでアイコンを呼び出せるようになります。※IcoMoonの初期設定のままだと「<i class="icon-heart"></i>」というようなprefexになります。
【手順4】ファイルのダウンロードと自サイトの設定
次に、ファイルをダウンロードして、自分のサイトに適用します。
IcoMoonのファイルをダウンロードして解凍
IcoMoonページ下部Font Generateの「download」をクリックして、ファイルをダウンロードします。zipファイルでダウンロードされますので、必要に応じて解凍してください。
自サイトに必要ファイルを写す
ダウンロードしたファイルから、「fonts」および「ie7」というフォルダと「style.css」というファイルを、自分のサイトの任意の階層に保存します。「fonts」「ie7」ファイルとstyle.cssは必ず同じ階層に保管してください。
スタイルシートを適用する
フォントを適用したいページの<head>～</head>内に、保存したスタイルシートの呼び出しを入れます。下記は一例です。フォルダ名はご自分がファイルを保管したフォルダに合わせて適宜変更してください。
<link rel="stylesheet" href="/fonts/style.css">
</head>
【手順5】アイコンを実際に使ってみよう
設定お疲れさまでした。いよいよ自分のサイトにアイコンを適用できます。
IcoMoonに戻り、downloadページで表示したいアイコンにマウスをあてると、「Get Code」という文字が現れますのでクリックしてください。
HTML内に記載されているコードをコピーしてご自分のサイトに貼り付けると、アイコンが表示されます。
色や大きさの変更は、スタイルシートを適用します。たとえば、<i class="icon-heart"></i>に下記のようなにスタイルを適用すると「」と表示されます。
編集後記
亀の子も以前はアイコンを画像で作っていましたが、色などを変えたくてFont Awesomeに乗り換えました。その時に困ったのが、使わないアイコンも全て網羅されているFont Awesomeの親切さです。ファイルが大きすぎるな、と感じてIcoMoonを導入し、軽量化に成功しました。この記事がサイトを自作している同志の皆様の一助になれば幸いです。