こんにちは、三輪です。
Webサイト制作の上で便利なアイコンフォント。
有名どころだと「Font Awesome」がありますね。たくさんのアイコンフォントがあって、眺めているだけでも楽しいです。
でも、実際の場面であんなにたくさんのアイコンを必要とする機会はまずありません。
必要となるアイコンだけを集めた、自分仕様のアイコンセットを作ることができるサービスがあります。
今日はそのサービス「IcoMoon」の使い方をご紹介します。
下記サイトにアクセスします。
▼IcoMoon
https://icomoon.io/
画面右上、「IcoMoon App」をクリックします。
ページを開くと、フリーで利用できるアイコンが並んでいます。
一覧の中から、利用したいアイコンをクリックして選択していきます。
選択されたアイコンには、オレンジ色の枠が表示されます。もう一度クリックすると、枠が外れて選択が解除されます。
必要なものを選択したら、画面右下の「Generate Font」をクリックします。
選択したアイコンの一覧が表示されます。アイコン右側の名前は、変更することができます。
また、アイコン自体をクリックすると、アイコンに対してサイズ変更や回転などの編集を行うことができます。
自分で作成したアイコンやテキスト、素材サイトからダウンロードしたデータ等も、同じくフォント化することができます。
ただし、使用できるのはSVG形式のファイルのみとなりますのでご注意ください。
使用したいファイルを「Untitled Set」欄にドラッグ＆ドロップすると、アイコンが登録されます。クリックして選択してください。
この時、下のフリー欄のアイコンを選択して、混在させることも可能です。
なお、追加はしたけれどやっぱり不要というアイコンは、「Remove」（ゴミ箱のアイコン）に切り替えてクリックすると削除できます。
必要なものを選択したら、一覧から作成した時と同じく、画面右下の「Generate Font」をクリックします。
自分で作成したりダウンロードしてきたアイコンは、微妙な名前が自動設定されている場合が多いので、ここで良い感じの名前に変更してください。
また、アイコンがカラー情報を持っている場合があります（アイコンをクリックして水滴マークが表示されたら、カラー情報を持っています）
「Remove Colors」アイコンをクリックすることで、カラー情報を削除することができます。
必要なアイコンが揃い、名前の設定等も完了したら、画面右下の「Download」をクリックします。ファイルはZIPになっているので、解凍してください。
中には6つのファイルが含まれています。必要なのは「fonts」フォルダ内の4つのフォントファイルと「style.css」です。
「fonts」フォルダ内の4つのフォントファイルを全てアップしないと、環境によってアイコンが表示されない場合がありますので、4つ全て配置するようにしてください。
「style.css」は、ファイルごと配置しても良いですし、既存のCSSファイルに内容だけ転記しても同じように利用できます。
その場合は、ファイル内の記述を全て転記するようにしてください。
きちんとフォントが作成されているか試してみます。
タグのクラス名に「icon-〇〇（作成時に設定した名前）」と記述してください。
iタグで使用することが多いですが、他のタグでも問題ありません。
|
1 2 3 4 5 |
<i class="icon-square"></i> <i class="icon-fish"></i> <i class="icon-security"></i> <i class="icon-headphones"></i> <i class="icon-pacman"></i> |
問題なく表示されました！
試しに作ってみただけとはいえ、我ながらよくここまで無秩序なアイコンをセットにしたと思います（笑）
アイコンフォントの扱いは、テキストと同じです。色や大きさを指定したい場合は「font-size」「color」を指定してください。
フォントなので、どんなに拡大しても荒くなることはありません。
なお、普通にhtml内に記述する場合は上記の書き方でOKですが、例えば疑似要素内に設定したい時は、以下のように記述することで設定が可能になります。
|
1 2 |
content: "\e900";/* 指定したいアイコンの番号 */ font-family: "icomoon"; |
アイコンセットの作成が完了したら、セット内容を保存しておきます。
画面右上、「Ξ」ボタンをクリックし、「Manage Projects」を選択します。
名前を入力します。ここでは「testiconset」としました。
「Download」をクリックします。先ほどの名前が既に設定されていますので、問題がなければそのまま「保存」をクリックすると、JSONファイルがダウンロードされます。
保存先は任意の場所でOKですが、作成したフォントファイルと同じ場所にしておくと、後々の管理が楽かと思います。
ファイルが保存できているか確認してみます。
「Import Project」をクリックして、先ほどダウンロードしたJSONファイルを指定します。
「Load」をクリックします。
作成したアイコンセットが表示されました！
新たに追加や削除を行い、JSONファイルを再作成すると、更新した内容が保存されます。
これで、端末や環境と問わずアイコンの情報を使いまわすことができます。
更新した後は、再度フォントセットをダウンロードし、更新前のファイルと差し替えることも忘れないようにしてくださいね。
サイズ変更による劣化の心配もなく使用できるアイコンフォントは、Web制作において大変重宝します。
また、例では小さめのアイコン画像のみを使用しましたが、元がSVGファイルであれば、もっと大きなデータも含めることができます（あまり大きかったり複雑な画像は向きませんが）
簡単に作成できて利用範囲も広いので、ぜひお試しください！
