WEB制作を行っていると、アイコンを使いたい時があります。
アイコンを画像で用意すると、
- 画像が荒く表示されることがある
- 量が多いとサイトが重たくなってしまう
- 色やサイズを微調整するときは画像の作り直しとなる等、メンテナンス性が良くない。
といった問題が出てきます。
そんな時に便利なのがアイコンWEBフォントです。
ここでは、WEB業界で幅広く使われているアイコンWEBフォント「IcoMoon」の導入方法から実際のサイトへの適用までの一連の流れを紹介します。
目次
IcoMoonとは
IcoMoonとは、アイコン型のWEBフォントです。
フリーフォントからプレミアムフォントまで幅広く取り扱っており、
WEBフォントのデメリットとして取り上げられる問題をクリアしているため、
多くのWEBサイトで使われているWEBフォントです。
WEBフォントのデメリットとして取り上げられる問題について、
詳しく知りたい方は以下のページを参考にしてくださいね。
IcoMoonの導入手順
フォントファイルをダウンロードする
まずは、以下のサイトにアクセスします。
外部ページIcoMoonの公式ページ
アイコン一覧の中から、サイト上で使いたいアイコンを探してクリックで選んでいきます。
全て選び終わったら、ページ右下の「Generate Font」をクリックし、フォントファイルをダウンロードします。
サーバーにフォントファイルをアップロードする
フォントをダウンロードしたら「fonts」フォルダの中身を確認します。
以下のファイルが揃っていることを確認しましょう。
- icomoon.eot
- icomoon.svg
- icomoon.ttf
- icomoon.woff
これらのファイルをFTPでサーバーにアップロードします。
この時、サーバーの中にファイルがばらけてしまわないように、「fonts」という名前のディレクトリを作って、その中にアップロードしておくと良いでしょう。
FTPでのファイルアップロードの手順は以下の記事を参考にしてください。
スタイルシートでフォントファイルを読み込む
サイト上でフォントを使えるようにするため、ファイルを読み込んでいきます。
ダウンロードしたフォントファイルの中に、「style.css」というファイルがあります。
この中身を導入先サイトのスタイルシートに貼り付けます。
以下はフォントファイルの読み込み部分のみ抜粋したソースコードです。
CSS
htmlでフォントファイルを表示するコードを記述する
スタイルシートの記述が完了したら、最後にアイコンフォントを表示するためのコードをHTMLで記述していきます。
ダウンロードサイトに戻って、HTMLの記述用コードを確認し、自分のサイトに記述していきます。
HTML
表示確認を行う
以上で、アイコンフォント「IcoMoon」が表示されるようになります。
サイトをリロードして、表示確認を行いましょう。
