無料でwebアイコン使いたい放題。Googleマテリアルアイコンの使い方

2021年3月4日
カテゴリー ツール
B!

Googleマテリアルアイコン 使い方

ホラーな画像ですが、今回の内容は何も怖くないのでご安心を。

webアイコンフォントの定番といえば「Font Awesome」。

ボクもこのブログで使ってますし、本業のウェブ制作でも様々な案件で出番が多いです。

Font Awesomeは、使い方自体は簡単ですが、利用にメールアドレスの登録が必要なところが少し手間だなあと思ってました。

しかも「次バージョン(6)」からは有料になるようです。
サイトを見るとサブスクリプション型で99ドル/年と書かれてました。

そこで今後、使うことが多くなりそうな「Googleマテリアルアイコン」を紹介したいと思います。
無料、簡単、軽量と三拍子揃った非常に使いやすいwebアイコンです。

Font Awesomeほどアイコンの種類が多くはないですが、簡単に使える点は同じ。
よく使いそうなアイコンはほぼ揃ってて、様々なタイプのデザインとなじみやすいマテリアルデザインなので、ほとんどの案件でFont Awesomeの代わりになると思います。

Googleマテリアルアイコンとは?

simple,modern,friendly,and sometimes quirk

「simple, modern, friendly, and sometimes quirky」をコンセプトとしたマテリアルデザインによるアイコンフォントです。

日本語で言うなら「シンプル、今風、やさしい、ときに個性的」という感じでしょうか。

利用は無料で、web、Android、iOSの案件で使えます。

アイコンの種類は900以上

アイコンは900種類以上でそれぞれ5種類のタイプの用意があります。
画像データではなく、CSSでデザインの調整が可能。画質の劣化なく大きさや色がいじくれます。

outlined(アウトライン)

outlined

filled(色付き)

filled

rounded(丸っこい)

rownded

sharp(シャープ)

sharp

two tone(ツートーン)

two


5つの差、わかりましたか?

同じ形でも少しデザインに手を加えるだけでわりと印象は変わります。
優れたデザイナーは微妙なデザインの差異を細かく使い分けるのがうまいんですよね。
そうなりたいです。

Googleマテリアルアイコンの使い方

1. アイコンデータを読み込む

CSSで使えるよう以下の1文をHTMLで記述します。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2. 使いたいアイコンを選ぶ

Googleマテリアルアイコンのサイトへ行けば、アイコンを見て選べます。

  • 1. 使いたいアイコンをクリック
  • 2. CSSをコピー

アイコンを表示したいところへペーストします。
これだけでOK。簡単ですね。

使い方

CSSの「content」を利用する方法もあります。
contentを利用すると、アイコンを使いたい場所でいちいちHTMLの記述をしなくてすみます。

例えば、以下のようなリンク用のボタン。

毎回、ボタンのあるところにアイコン用の記述をするのは面倒。
以下のようにCSSに書いておけば、リンクに自動的にアイコンを挿入できます。

a:before {
  content: '\<上図の3をコピペ>';
  font-family: 'Material Icons';
}

アイコンは画像でダウンロードも可能です。
上の画像4のところ「SVG」、「PNG」をクリックしましょう。


これまで説明してきた使い方は、Googleサーバーにあるアイコンフォントデータを使う方法です。

手元にアイコンフォントデータをダウンロードして使うこともできます。

その方法や、さらに詳しい使い方を知りたい人はぜひ公式サイトを訪れてください。

公式)Googleマテリアルアイコン


以上です。

無料、簡単、軽量。使わなくちゃ損ですね。

読み終わったらシェア!

B!

ついに再開!ウェブさえのHP作成サービスはこちら

あなたにはこんな記事もおすすめ!
ん?最新情報を見逃さない方法!?
わざわざブログに来なくても、自動的にウェブさえの更新情報を受け取ることができます。「お、いいね!」と思われた人は、SNSのアカウントをフォローするか、RSSリーダーへ登録、どれでも都合のいい方法で受け取ってくださいね! しばらく休止していたウェブさえマガジンも最近再開しました。メールで受信できます。受信は無料で、いつでも解約できるので気軽に登録してみてください。
ウェブさえマガジン
  • facebook
  • twitter
Top
ウェブさえ
@websae2012