フォント

Material Design Iconsをアイコンフォント化しました

141028-0

少し前のことですが、Googleが(?)GitHubで750ものマテリアルデザインなアイコンを配布したと一部で話題になっていました。
これはかなり緩い利用条件で使うことができます。商用でも非商用でも利用できて、改変とかも可だったはず。クリエイティブ・コモンズのCC BY-SAというもので、複製・再配布・改変OK、適切なクレジットを表示する必要があり、改変した場合は同じライセンスで配布すること、というものです。

それをダウンロードして普通に使ってもいいのですが、今回はAndroidで…というかGlaejaとかZooper Widgetでも使えるようにアイコンフォント化してみました。そのやり方を紹介します。

アイコンその他をダウンロード

141028-1 141028-2

ここからアイコンその他が入ったzipファイルをダウンロードします。

141028-3 141028-4

zipファイルなので、ファイラーなりで解凍しましょう。私の場合、acroHDでかなりの時間が掛かりそうだったのでPCで解凍しました。が、その解凍したファイルをacroHDにコピーするのもまたえらい時間がかかりました…。

解凍した中には種類ごとにフォルダが別れており、その中にさらに大きさなどで分かれています。

141028-5

適当に開いてみて中身を確認してみましょう。こんなアイコンたちです。

これはpng形式のものもあるので、もちろんそのまま使ってもいいです。でもそれだけだと面白くないし使いにくいのでフォント化してみます。最初に言っておくと、面倒です。

Icomoonでアイコンフォント化

141028-6 141028-7

以前も紹介しましたが、Icomoonというサイトでフォントを作ります。

左上の「Import」ボタンをタップして、フォント化したいアイコンを選びます。この時、pngファイルではなくsvgファイルを選びます。svgファイルはpng画像とは別に、svgフォルダに入っています。プレビューはpng画像で確認できますが、一部ファイル名が違うものもあったりします。

141028-8

とりあえず、svgファイルを選べばそれがIcomoon上にインポートされます。

141028-9

続いて、表示されているアイコンからフォント化したいものを選択します。インポートしたもの以外に最初から表示されているものをついでに一緒に入れても構いません。

選び終わったら画面下の「Font」ボタンをタップ。

141028-10

それぞれのアイコンについて、入力欄があるので、右下に「どの文字を打ったらそのアイコンが表示されるか」という文字を入力します。

入力し終わったら下部の「Download」ボタンをタップすればダウンロードできます。

141028-11

ダウンロードされたファイルはやはりzipファイルです。
解凍すると中にfontsフォルダがあり、なかにicomoon.ttfみたいなファイルがあります。これが今作ったフォントファイルです。あとはGlaejaなりZooper Widgetなりで普通のフォントと同じように使ってみましょう。

必要な物を見繕って作ってみた

まぁ、ぶっちゃけ面倒です。なので、適当に見繕ってアイコンフォント化しましたので、ちょっと使ってみたい人はこれをダウンロードしてみてください。

gmate.ttf (14KB)

ライセンスは元と同じCC BY-SAです。再配布などする場合は、一番の元がGoogleのだとわかるようにリンクもお願いします。

どの文字がどのアイコンを表示するかの一覧は以下の画像を参考にしてください。公開されているアイコン全てをフォント化したのではなく、下記画像にある約90個のみです。

141028-code

このセレクトに不満な方は、上に書いた方法で自分で作ってください。でも面倒です。スマホだとたぶん果てしなく面倒です。

このアイコンフォントをGlaejaとかZooperでどう使うの?というのはまた別のお話なので、そういう時はこのブログを漁ってみてください。

Random Posts

リアルタイムのフィルターやエフェクトがえぐい!Adobe Photoshop Camera配信開始
GoogleストアにてPixel 3a XL が2万2千円引き!39,160円の在庫限りセール!
楽天モバイル、契約事務手数料とMNP転出手数料を0円に!携帯キャリアの常識を覆す取り組み「ZERO宣言」
格安SIMの通信速度比較【2019年5月その2】nuroモバイルau回線はそこそこ、b-mobileとDTI SIMの爆速が続く
TaoTronics、完全ワイヤレスイヤホンSoundLiberty 53に新色ホワイトを追加!クーポンもあります
Twitter、twiccaなど古いアプリが使用不可に!TLS1.2未満で接続できなくなったことが原因か
Quotes Widget:ホーム画面に好きな名言をランダム表示できるウィジェット
GeekbuyingにてElephone A6 Miniが99.99ドル~になるセールイベントが開催中!
ワイモバイル、月額基本使用料が最大13カ月間1000円割引となる「ワイモバ学割」を12/5より開始
カードUIを目指してみた【あなたのホーム画面見せてください 2019】
セブンイレブンにてAnker製品の販売決定!ほか、2020年10月19日の気になるスマホ関係ニュース
Pixel 4(仮称)っぽい壁紙画像を作ってみました
mineo、ドライブパッケージの無料体験モニターを募集!
ドラゴンクエストウォークが正式サービス開始!ドラクエとリアルを結ぶ位置情報ゲーム
老舗Android用Twitterアプリ『twicca』がついに使用不可に