少し前からAndroid の WebView で表示されない！と悩んでいるアイコンWebフォント「WebHostingHub Glyphs」ですが、これ自体はとても多くのアイコンが提供されていて便利なのでご紹介。
あらゆるWebプロジェクトで利用しやすく、Android や iOS などモバイル端末の開発で最適とのこと。
…私の環境では一部の WebView ページで動かないんですけどね！
公式ページはこちら。
導入方法は、まず「How to Use」の、右サイドバーから「DOWNLOAD ALL ICONS IN ONE FONT」ボタンをクリックします。
そうすると、WebHostingHub Glyphs フォントと CSS がダウンロードできるので、これをWebフォントを追加したいプロジェクトに追加します。
そして、下記を HTML の head に追加すれば準備はOK。
<link rel="stylesheet" href="./css/whhg.css">
なお、上記のCSSファイルへのパスは環境に合わせて適宜変更してください。
あとは、アイコンWebフォントを追加したい場所に i タグ を使用してアイコンを追加します。
<i class="icon-map-marker"></i>
実行すれば、アイコンが追加されているはずです。
なお、アイコン追加時に使用するタグは、i タグ でなくてもOKみたい？
また、アイコンは Webフォントとしてではなく、PNG 画像としてダウンロードすることも可能です。
サイズは 32×32 もしくは 16×16 のサイズで、色は白か黒のみです。
サイズや色が環境と合えば、PNG 画像を導入してもいいかもしれません。
端末によっては、Webフォントが正常に表示されない環境もあるようですし…使えそうなら画像を使った方が確実かつ簡単かも。
以上、アイコンWebフォント「WebHostingHub Glyphs」のご紹介でした。
皆様、便利にご活用ください。
