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

|
141028-0

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

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

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

141028-1 141028-2

Release Material Design Icons · google/material-design-icons · GitHub

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

141028-3 141028-4

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

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

141028-5

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

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

Icomoonでアイコンフォント化

141028-6 141028-7

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

IcoMoon App – Icon Font & SVG Generator

左上の「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

ふぁぼーん:ツイートをスマホに保存!元ツイートが削除されてもオフラインでも閲覧可能
ドコモショップでFOMA SIM(標準サイズ)をnano SIMにサイズ変更
ホーム画面コンテスト2017 投票結果発表! 1位はウニさん作成の「雪の日」
Xperia X 京都【ホーム画面コンテスト2017】
Tweety:ナイトモードもあるTwitterのタイムライン等を表示するウィジェット
MVNO各社の格安SIM月額料金比較表:2017年2月の変更を受けて
UMi Z レビュー:Zの名は伊達じゃない!Helio X27搭載のハイスペック機は久々に出会った「使える」中華端末
フィット感・遮音性良好!通勤通学に向いている有線イヤホン「SoundPEATS B50」のレビュー
Today Weather:カード型など種類豊富な美しいウィジェットを持つ天気情報アプリ
ベースBooster-イコライザープロ:フラットで落ち着いたデザインのイコライザーアプリ
Playストアで有料アプリを公開&無料セールを設定する-アプリ販売始めました
格安SIM (MVNO) 速度比較 : 2017年10月その2 BIGLOBEモバイルタイプAはそこそこ速かった!?
MEZZO”の壁紙と必要なアプリ・機能を共存させたホーム画面【ホーム画面企画2016】
Simple Memory Widget:RAM、内部ストレージ、SDカードの空き容量をサークル表示
歩き回れるモバイルVR端末「LINK」をひと足先に体験してきました #HTCグローバルレポーター
pocket line hatebu image gallery audio video category tag chat quote googleplus facebook instagram twitter rss search envelope heart star user close search-plus home clock update edit share-square chevron-left chevron-right leaf exclamation-triangle calendar comment thumb-tack link navicon aside angle-double-up angle-double-down angle-up angle-down star-half status