$hide=page-404-mobile

$type=carousel$columns=4$cat=hide$show=home

Google アイコンフォントの特徴とウェブサイトへの設定、利用方法


Googleは、ウェッブサイト向けアイコンフォントを提供しています。Googleのアイコンフォントは、軽量で導入も簡単、手軽に使えます。
[post_ads]

Google マテリアル アイコンフォントの特徴

アイコンフォントは、手軽に利用できるだけでなく、効率性も高く、見た感じのイメージの向上にも繋がる利点を提供します。
  • 900以上のアイコンが1つの小さなファイルに格納
  • Google ウェッブフォントサーバー、またはセルフホストから提供
  • 全ての現行モダンブラウザーをサポート
  • CSSを使用して、色、サイズ、位置を設定可能
  • ベクターベース:Ratinaディスプレイから低DPIのディスプレイのどのスケールでも良く見える
アイコンフォントは、最小のwoff2フォーマットで42KB、スタンダードwoffフォーマットで56KBと軽量です。

Google ウェブフォントを使用した導入手順

以下の1行のHTMLコードを、<head>タグ内に設置するだけです。
[<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">]

備考:
Bloggerのテンプレートに上記コードを貼り付けて、そのまま保存すると</link>がないためエラーとなります。その場合は、</link>を行の最後に追加して保存して下さい。

HTMLでのアイコンの使用方法

Google アイコンフォントは、Font Awesomeと同様にインライン エレメント(<i>タグ)を使用して記事内に設置します。記事内でアイコンフォントを加える場合は、ブログの編集モードをHTMLにして、アイコンフォントを加える場所に入力します。

アイコンの表示方法と例

アイコンの表示例とソースコードです。
android
<i class="material-icons">android</i><br />
テキストの名前をシンプルにアイコンにレンダリング(描写)する"ligatures"と呼ばれるタイポグラフィ機能を使用しています。テキストからアイコンへの変換はブラウザーが自動的に行います。(何らかの理由で表示されない場合、テキストが表示されることに加えて、使い勝手も良いと思います。)

ligturesをサポートするブラウザーとバージョンのリストです。

ブラウザー ligaturesサポートバージョン
Google Chrome 11
Mozilla Firefox 3.5
Apple Safari 5
Microsoft IE 10
Opera 15
Apple MobileSafari iOS 4.2
Android Browser 3.0

アイコンのサイズと色の表示例

android android android android
<i class="material-icons">android</i>
<i class="material-icons" style="font-size: 36px;">android</i>
<i class="material-icons" style="color: green; font-size: 48px;">android</i>
<i class="material-icons" style="color: red; font-size: 60px;">android</i>

サイズ

Material design icons guideline に準拠しているため、アイコンフォントのサイズはどの大きさにも対応可能ですが、Googleは12, 24, 36, または48pxで表示することを推奨しています。デフォルトは、24pxです。

以下はスタンダードマテリアルデザインのサイズガイドラインのCSSです。
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
アイコンフォントは、24pxで最も見栄えが良くなるようにできています。異なるサイズでアイコンを表示する場合は、上のCSSを使用すると役立ちます。

例:
android
<i class="material-icons md-36">android</i>

アイコンフォントは、手軽にどの色にもスタイリングできます。Material design icons guideline に準拠するために、Googleはアクティブアイコンを、明るい背景で黒の透明性(opacity)54%、暗い背景では白の透明性100%で表示することを推奨しています。

アイコンが無効、またはインアクティブの時は、明るい背景で黒26%、暗い背景で白30%を推奨しています。
以下は、上記推奨スタイルのCSSです。
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

通常(アクティブ)の表示例

android
<i class="material-icons md-dark">android</i>

無効(インアクティブ)の表示例

android
<i class="material-icons md-dark md-inactive">android</i>

カスタムアイコンカラーの設定

カスタムアイコンカラーを設定する場合は、CSSにお好みの色を記載します。
.material-icons.orange600 { color: #FB8C00; }
そして、クラスを指定して表示します。
android
<i class="material-icons orange600">android</i>

アイコンのライブラリー

コード名とコードポイントは、マテリアルアイコンライブラリーにリスト表示されています。

コメント

関連記事とスポンサーリンク

名前

AdSense,4,Blogger SEO,10,Blogger 活用法,18,Bloggerの基本機能と使い方,9,Bloggerの基本設定,7,MagOne,3,SNS,4,お勧め記事,14,お知らせ,1,
ltr
item
Blogger101@ブロギングライフ : Google アイコンフォントの特徴とウェブサイトへの設定、利用方法
Google アイコンフォントの特徴とウェブサイトへの設定、利用方法
Googleは、ウェッブサイト向けアイコンフォントを提供しています。Googleのアイコンフォントは、軽量で導入も簡単、手軽に使えます。Google マテリアル アイコンフォントの特徴と利用方法を紹介します。
https://1.bp.blogspot.com/-HibHsax4mN8/Wope8rhSnxI/AAAAAAAACKk/R-YSAN4LLWUghYRKHCu3AhDHLvK55KATQCK4BGAYYCw/s640/How%2Bto%2Buse%2BGoogle%2BMaterial%2BIcon%2BFont.png
https://1.bp.blogspot.com/-HibHsax4mN8/Wope8rhSnxI/AAAAAAAACKk/R-YSAN4LLWUghYRKHCu3AhDHLvK55KATQCK4BGAYYCw/s72-c/How%2Bto%2Buse%2BGoogle%2BMaterial%2BIcon%2BFont.png
Blogger101@ブロギングライフ
https://blogger101.blogging-life.com/2018/02/google-material-icon-font.html
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/2018/02/google-material-icon-font.html
true
6719002676499593843
UTF-8
Loaded All Posts Not found any posts 全てを見る さらに読む Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事 ラベル アーカイブ SEARCH ALL POSTS お探しのページが見つかりませんでした。 Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock コードを全てコピー コードを全ての選択 全てのコードをクリップボードにコピーしました Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy