Zenn
🏠

【CDNのコピペあり】Google Fonts Iconsの導入・使い方・装飾など【保存版】

2021/12/26に公開
CSS
HTML
Google
icon
googlefontsicons
tech

WEBサイトやブログサイトをコーディングでアイコンを使う際に便利なサービスであるGoogle Fonts Iconsについてまとめました。

導入方法からスタイルの調整まで解説していきます。

Google Fonts Icons とは？

Google Fonts Icons

Google Fontｓ Iconsは、WEBサイトやブログサイトでWEBアイコンフォントを簡単に表示させられるWEBサービスです。

アイコン一覧（公式ページ）

WEBアイコンフォントとは

WEBアイコンフォントは、WEBサイトで文字のようにアイコンを表示させられるアイコンです。

画像との違いは、拡大してもぼやけない・色やサイズも自由に変えられる点。
SVG画像も似たようなことはできますが、手軽さでいうとGoogle fonts Icons が勝っています。

Font　Awesomeとの違い

WEBアイコンフォントサービスでおそらく一番有名なのはFont Awesome。
Font Awesomeも、Google Fonts Iconsのように手軽に自由にスタイルを変えられますが、データが多くちょっと重いです。

その点、Google Fonts Iconsは速い・手軽・自由の三拍子が揃っています。

使い方

Google Fonts Iconsを使う準備として大きく２つ。

  • CDNを使う方法
  • フォントをダウンロードする方法

ちなみに今回スタイルの調整までするのはCDNを使う方法です。

CDNを使う方法

一番おすすめで手軽に使う方法はCDNをコピペする方法。

以下のコードをコピーして、headタグの中に貼り付ければすぐに使えるようになります。

index.html
<!-- Google font Icon -->
<link
	href="https://fonts.googleapis.com/icon?family=Material+Icons"
	rel="stylesheet"
/>

もしくはCSSのなかにCDNをコピペすることでも使えるようになります。

style.css
/* Google font Icon */
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

フォントをダウンロードする方法

もしくは、Google Fonts Iconsのサイト内で直接SVGやpng画像をダウンロードすることもできます。

Google Fonts Iconsをダウンロード

Google Fonts Iconsを表示させる

導入準備ができれば、Google Fonts Iconsのサイト内で使いたいアイコンを探してクリックしましょう。
→Google Fonts Icons

Google Fonts Icons

使いたいアイコンフォントをクリックしたら右側にメニューが表示されます。
この赤枠の部分を使って表示させていきます。

Google Fonts Icons

アイコンを表示させる方法はHTMLで直打ちするパターンとCSSの疑似属性で表示させるパターンの２つ。
それぞれ紹介していきます。

HTMLでアイコンを表示させる

メニュー内にあるアイコンフォントのコードをコピーします。

Google Fonts Icons

なぜかデフォルトだとクラス名がclass="material-icons-outlined"となっているので、class="material-icons"に書き換えます。（これの詳細ご存知の方はコメント等で教えていただきたいです。）

あとは、HTMLで表示させたい場所にコピペすれば表示されます。

index.html
<span class="material-icons">account_circle</span>

Google Fonts Iconsの表示

CSSで疑似要素にアイコンを表示させる

また、CSSで疑似要素にアイコンを表示させる方法もあります。
CSSの場合は、下のところをコピーします。

Google Fonts Icons

コピーしたらあとは疑似要素にコードを書きます。
まず、font-familyに"Material Icons"を使うことを提示して、
content: "\e5e1";でアイコンの種類を指定して表示されるようになる仕組みです。

a:after {
	font-family: "Material Icons";
	content: "\e5e1";
}

Font Awesomeではfont-weightの指定が必要でしたが、Google Fonts Iconsでは必要ないのでラクですね。

実用的に使う方法としては以下のようなボタンに矢印のアイコンをつけたりします。

index.html
<a href="" class="c-button">READ MORE</a>
style.css
.c-button {
	display: inline-block;
	color: #fff;
	background-color: #333;
	border: solid 1px #333;
	border-radius: 4px;
	text-decoration: none;
	padding: 10px 30px;
	transition: 0.4s;
	position: relative;
}
.c-button:after {
	position: absolute;
	top: 14px;
	right: 8px;
	content: "\e5e1";
	font-family: "Material Icons";
	transition: 0.4s;
}

.c-button:hover {
	opacity: 0.8;
}
.c-button:hover:after {
	right: 4px;
}

Google Fonts Iconsでボタンのアイコン表示

WEBフォントアイコンを装飾する

Google Fonts Iconsの基本的な表示方法がわかったところで、もう少し実用的な装飾をまとめてみます。

サイズを変える

Google Fonts Icons

サイズはWEBフォントと同じようにfont-sizeで指定させることができます。

index.html
<span class="material-icons">home</span>
<span class="material-icons text-7xl">home</span>
style.css
.text-7xl {
	font-size: 72px;
}

色を変える

Google Fonts Icons

WEBフォントアイコンの色を変える際も、WEBフォントと同じようにcolorで指定させられます。

index.html
<span class="material-icons">home</span>
<span class="material-icons text-7xl">home</span>
style.css
.text-red-500 {
	color: rgba(239, 68, 68);
}

ここまででわかるように、基本的に普通のフォントとしてスタイリングして問題ありません。
他にもmarginで余白や、positionで要素を重ねるなどもできます。

最後に

ということで、Google Fonts Iconsの使いかたまとめでした。

基本的にWEBフォントと同じようにCSSでスタイリングできるのでとても便利です。
また他にも便利な使い方があれば追記していきます。

それでは。👋

Discussion