この記事は【2021年3月4日】が最後の更新のため、記事の内容が古い可能性があります。
Googleが提供し始めた無料のアイコンフォント
普段はFont Awesomeにお世話になっていますが、良さそうなのでご紹介。
Font Awesomeについての記事はこちら
WEB FONTの読み込み
<head>〜</head>の間に下記を入力。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
これでWEB FONTの読み込み環境が整いました。
記述する場所については特に指定はないですが、分からなかったら似たようなコードが書かれている部分でOKですよ。
問題ないだろうけど、うまく表示されなかったら読み込みの順番（行）とか変えてみてください。
ICONの表示方法
Font Awesomeとはちょっと違うのですが、感覚的に扱いやすいかと思います。
<i class="material-icons">xxx</i>
xxxの部分に各ICONに指定されているテキストを入れて表示させます。
表示例
<i class=”material-icons”>pets</i>
pets
<i class=”material-icons”>watch</i>
watch
サイズや色を指定も簡単ですよ
Googleの公式ドキュメントにも記載されていますが、classに追加する事でサイズや装飾なども指定できます。
アイコン数などこれからですが、扱いやすいとは思うので是非お試しください。
PR
ニッチなテーマのイラスト素材を投稿中！ぜひご利用ください。
ナマケモノなど可愛いイラストをイラストACで無料配布中！
オリジナル絵本をKindleで出版！
ナマケモノのふにゃまるちゃんを読む困ったときは格安で依頼！RU DESIGNも出品中
格安レンタルサーバーでサイト運営を始めよう
ドメイン取得は一括管理が便利！
応援・支援よろしくお願いします！サイト運営に活用させていただきます。
Braveクリエイターサポート
関連記事
2025/03/26
Googleは2025年3月25日、最新AIモデル「Gemini 2.5」を発表しました。このモデルは「思考モデル」とされ、高度な推論能力とマルチモーダル処理能...
2025/02/28
最新のAI技術を活用し、SEO対策やコンテンツ作成を効率化できるツールが注目を集めています。その中でも、Notion AIは無料で使える範囲でも強力な機能を提供...
2025/02/28
新しくPCを手に入れたけど、「何から始めたらいいのかわからない」と迷っている皆さんに朗報です！この記事では、Windowsをもっと便利に、楽しく使うためのテクニ...
2025/02/28
Macを手に入れたばかりの皆さん、ようこそ洗練されたデザインと快適な操作性にあふれたMacの世界へ！その魅力を最大限に引き出すためには、ちょっとしたテクニックや...
2025/02/21
テック界のビリオネア、イーロン・マスク氏が、自社のxAIで開発した最新の人工知能モデル「Grok 3」を期間限定で無料提供すると発表しました。 これまではサブス...