リガチャなアイコンフォントを自作しようとするとけっこう大変そうで、そのためのアプリを揃えて操れるようになったり、リガチャの仕様を把握したり、専用のCSSを書いたりする必要がある。そういった正攻法のやり方としては、このページがとてもわかりやすかった。また、実際にそのページの方法によって制作されたLigature Symbolsも魅力的。
ところが自分が欲しいのは、Twitterで使っているアバターアイコンと、ブログのボタン等で使う5〜6個のアイコンを含んだ最小のセットで良くて、そのために前述のような本気を出して作るのは、なかなか重い腰があがらずにいたところ、アイコンフォントを手軽に生成できるサービスIcoMoonの中に、そのリガチャを作成する機能もあることに気がついた。^1 それを使ってみたら、予想以上に簡単にリガチャなアイコンフォントをサクッと作れた。
上のはそのIcoMoonを使って作ったリガチャなアイコンフォントで、Twitter等での自分のアバターアイコンをフォント化したもの。このブログのフッター部分でも使っているけど、たとえば上記ではHTML部分は以下のようになっている。^2 ruedapの部分がリガチャ。
<p class="dapicons">ruedap</p>dapiconsというCSSクラスにリガチャで必要なスタイル設定が記述されているんだけど、IcoMoonがリガチャなフォントファイルの生成に加えて、それらも自動で作ってくれる。
他に、この記事の末尾にあるホームに戻るボタンもリガチャアイコンで、HTML部分は以下のようになっている。こちらはさらに簡潔で、スタイルの適用はCSS側で行っているので、HTML上は何の変哲もないかんじに。homeの部分がリガチャ。iタグとかも不要。
<nav role="navigation">
<a href="/">home</a>
</nav>ただ、リガチャなアイコンフォントはIE9以下が非対応という大きなデメリットがあって、現在主流なCSSの::before擬似要素を使ったアイコンフォントに比べるとマイナーだけど、このリガチャを使う仕組み自体が面白く、HTMLの記述もシンプルになりやすく意味的にも素直に書ける。自分で専用のリガチャを作ってみたいと思っていたので、前述のサービスのリガチャ作成機能はそれにうってつけだった。[^3] 以下ではその作成手順を簡単に解説。
[^3]: それで実際に作ってこのブログでも使っているアイコンフォントはGitHubで公開しているけど、自分以外の人が使うものではなさそう。公開しているのは、主に自分の複数プロジェクト間でgit submoduleを使って共有するため
IcoMoon
IcoMoonを使うことを前提にリガチャなアイコンフォントを作る上で必要になるものは、既存のアイコンをリガチャにする場合は何も必要なくて、前述のアバターアイコンのように自作アイコンをリガチャにする場合は元のSVGファイルが必要になる。でもそれだけ。
今回は後者の場合を想定して書いていく。まず、その元となるアイコンのSVGファイルは、IcoMoonのものをベースにして作成すると簡単で良い。なのでIcoMoonのページ上で鉛筆アイコンを押してEditモードにした上で、どれでも良いので1つアイコンを選んで詳細ウィンドウを開いて、Download(zip)ボタンを押してzipファイルをダウンロードする。
そのzipファイルを解凍すると、選択したアイコンのSVGファイルが出てくるので、それを自作アイコンを作るためのベースのSVGファイルにする。SVGファイルの編集はそれが可能なものなら何でも良いと思うけど、自分は普段Illustratorを使っているのでそれで行った。以下のキャプチャは、ダウンロードしたSVGファイルをIllustratorで開いて、元のアイコンを削除し、そこに自作のアバターアイコンを配置しているところ。これで上書き保存する。
その保存したSVGファイルを、IcoMoon上のImport Iconsボタンからアップロードする。うまくアップロードできると、以下のようにYour Custom Iconsの欄に先ほど作ったSVGアイコンが出現する。それをクリックすると詳細ウィンドウが開くので、Tagsのところで適切な名前をつける。今回は自分のアバターなのでruedapと入力した。
ここからがリガチャの設定をした上でフォントを生成する手順。まず、モードを矢印マークのSelectモードに切り替えて、Your Custom Iconsにある自作のSVGアイコンを選択し、ページ下部にあるFontボタンを押す。
そうすると、フォントの設定画面に移動するので、Preferencesボタンをクリックして設定画面を開き、Font Nameにフォント名を入力し、Enable Ligaturesのチェックボックスをオンにする。フォント名は今回はdapiconsにした。
Enable Ligaturesをオンにすると、表示されているアイコンの上部でそれに割り当てる文字列を入力可能になるので、そのアイコンフォントのリガチャとして割り当てたい文字列を入力する。これが今回のメインイベントで、自分のアバターなのでruedapと入力した。
これで完成。ページ下部にあるDownloadボタンを押すと、今設定したリガチャなアイコンフォントが生成されて、zipファイルのダウンロードが始まる。ダウンロードしたファイルを解凍してindex.htmlを開いてみると、下のキャプチャのように先ほど作成したリガチャなアイコンフォントが表示されているはず。ちゃんと表示されていれば既に利用可能状態。
デフォルト状態ではdata-iconの独自データ属性を使用した指定方法がされているので、そのまま使ってもいいし、冒頭で書いたように普通のCSSクラスやSassから指定するように変更してもいいと思う。その元となるリガチャ用のCSSはstyle.cssに記述されている。
上記では説明を簡略化するために、アイコンを1つしか含んでないリガチャを作ったけど、実際には自分は以下のように割り当てて使っている。現在11個で**.ttfファイルは約4KB**。
IcoMoonでは設定をブラウザが記憶しててくれるし、必要ならその情報を.jsonファイルにエクスポートすることも可能なので、アイコンの数を最小限に留めておいて、必要になってから追加するというやり方もしやすい。あと、Chromeの拡張機能とかもある。
というような感じで、専用のアプリも専門の知識もほとんど必要なくポチポチとするだけでリガチャなアイコンフォントをお手軽に作成できるIcoMoonが素晴らしいって話でした。