WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： トレンド >サービス紹介

日本語から英語まで様々なフォントの種類があるGoogle Fontsにアイコンがあること、ご存知でしょうか？
今回はGoogle Fonts アイコンの使い方を紹介していきます。

Google Fonts アイコンの使い方

Icons – Google Fontsにアクセス

「Icons – Google Fonts」にアクセスします。

Icons – Google Fontsにアクセスするとこのような画面になっています。

アイコンの種類

アイコンの種類は全部で5種類あります。
デザインによってアイコンの雰囲気を簡単に変えられるのは嬉しいですよね。
①Outlined・・・アウトラインの線の状態のアイコン

②Filled・・・塗りつぶされたアイコン

③Rounded・・・角丸のアイコン

④Sharp・・・角が鋭いアイコン

⑤Two tone・・・2つの色を使ったアイコン

写真で見ると分かりづらいですが、微妙に違っているのが分かりますよね。

アイコンをデザインで使う場合

①使いたいアイコンを選択します。
②アイコンのサイズと色を決めます。
③SVGかPNGどちらかの形式を選び、ボタンをクリックするとアイコンがダウンロードされます。

コーディングで使う場合

まずは、アイコンが使えるようにHTMLで記述します。

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

使いたいアイコンを選び、②の赤枠をコピーしアイコンを入れたい部分に記述したら完了です。

赤枠の「Code point」の部分はcssで使いたい時に使用します。

まとめ

デザインでもコーディングでも簡単に使用できるGoogle Fontsのアイコンとても便利ですよね。
また、アイコンもGoogleが推奨するマテリアルデザインに合わせて作られているので、分かりやすく様々な場所で利用できると思います。
ぜひ、使ってみてください。