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

もの

2021/12/28

【便利!】Google Fontsにアイコンがあること、知っていますか?

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

日本語から英語まで様々なフォントの種類がある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が推奨するマテリアルデザインに合わせて作られているので、分かりやすく様々な場所で利用できると思います。
ぜひ、使ってみてください。

コーディング業務のご依頼、ご相談の詳細についてはこちらから

最後までお読みいただき、ありがとうございました。

よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ