こんにちは！ウェブ担当のニシウラです。
今日は11月04日で「いい推しの日」らしいのですが、皆様「いい推し活！」していますか？
私はここ数年ほどアイドルとプリキュアにハマっていて、ライブや配信やグッズなどに時間とお金を費やしています。どちらも全然足りませんね。推し活たのしい～
さて、今回はデザイン作成をする際に大活躍な「Google Fonts Icons」について書きたいと思います。
アイコンを使いたい時はとりあえずコレ！ってくらい頼ってしまいます。とても便利！
Google Fonts Iconsとは？
Google Fonts Iconsとは前回の記事にて紹介した「Google Fonts（無償／商用利用OK）」内にあるアイコンフォントで、メニューのIconsから一覧を表示できます。
一覧ではまず「Material Symbols」のアイコンが表示されています。
検索バーから「Material Symbols」と「Material Icons」が選択できるので、どちらかお好みの方を選択しましょう。
「Material Symbols」と「Material Icons」の違い
Material Symbolsは、『Outlined』『Rounded』『Sharp』の3タイプがあり、さらに画面上で太さや塗りつぶしなどの調整が可能な可変アイコンです。
繊細なイメージが欲しい時は細めに、ポップな時は太めになど、スライダーを動かしてその場で見た目の調整ができます。
Material Iconsは、『Outlined』『Filled』『Rounded』『Sharp』『Two tone』の5タイプがありますが、こちらは調整ができません。
デフォルト表示のアイコンで十分、という場合はこちらがおすすめ。
また、2色アイコンの『Two tone』はMaterial Iconsにしかないので、使用したい場合はこちらを選びましょう。
①アイコンをwebフォントとして使用する
「Material Symbols」の場合
「Variable icon font」のコードをHTMLのhead内に記述し、アイコンのフォントデータを読み込みます。
次にサイトから使用したいアイコンを選択し、<span>タグをHTMLの任意の位置に記述します。
「Material Icons」の場合
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">上のコードをHTMLのhead内に記述し、アイコンのフォントデータを読み込みます。
サイトへの表示方法は上記のMaterial Symbolsの同じで、<span>タグをHTMLの任意の位置に記述します。
②アイコンを画像データとして使用する
右側に出てくるアイコンメニューより、SVGかPNGのボタンをクリック。
ダウンロードしたアイコンは、画像データとしてそのまま使用ができます。
③おまけ：アイコンをフォントとしてインストールする
Google Fonts Iconsはその名の通りフォントなので、パソコンにインストールして使用することもできます。
トップページから『GitHub repo ＞ fontフォルダ ＞ 各フォントデータ』の順にアクセスし、お好みのフォントデータをダウンロードしてください。
例）Photoshopで使用する場合
通常のテキストと同じように、文字ツールで入力します。
フォントは「Material Icons」を選び、テキストはアイコン名を入力します。
まとめ
Google Fonts Iconsは提供数とパターンが多く、欲しいイメージのアイコンが見つかりやすいのが嬉しいところ。
テイストが統一されているので、複数のアイコンを使用してもバラつきが出ない点も魅力ですね。
とてもシンプルなアイコンで用途も幅広いので、何に使用するのもおすすめです！
ぜひ使ってみてください～！
