1. TOP
  2. >WEB関係>
  3. Google推奨のマテリアルアイコンも結構いいかも

Google推奨のマテリアルアイコンも結構いいかも

WEB関係

2021/03/04
Google推奨のマテリアルアイコンも結構いいかも

この記事は【2021年3月4日】が最後の更新のため、記事の内容が古い可能性があります。

Googleが提供し始めた無料のアイコンフォント

fonts.google.com/icons

普段は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 -

ニッチなテーマのイラスト素材投稿始めました。良かったら使ってください。
RU DESIGN/無料イラスト・フリー素材「イラストAC」

オリジナル絵本 Kindleにて出版
ナマケモノのふにゃまるちゃん

ドメイン取得は同じところで取得しておくと便利ですよ。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。
ホームページ制作ならRU DESIGN

関連記事

Wondershare Filmoraをお得に購入する方法と、短編アニメを制作してみました
2024/02/17
 Wondershare Filmora(ワンダーシェアー フィモーラ)という動画編集ソフトを購入してみました。CapCutでは商用利用不可(ブラウザ版は商用可...
無料で高性能な動画編集ソフト(アプリ)紹介
2024/02/06
 仕事の合間に創作を再開。どうせだったらいろいろ練習も兼ねてやってみようということで、オリジナルの創作アニメを制作しYouTubeでの公開を始めました。まだ、完...
スマートフォンに特化したアドネットワーク「nend」2024年3月29日にサービス終了
2024/01/06
 スマートフォンアドネットワーク「nend」について2024年3月29日をもってサービスを終了することを明らかにしました。 2010年に開始以来、今年で15年目...
Googleの検索結果の件数が普段と違うと感じた方への対処法
2023/11/06
 Googleの検索結果が普段と全然違うってことはありませんか?Googleアカウントにログインした状態でGoogleから検索をすると、アカウントに基づく情報を...
Photoshopの代替品として使える「Photopea」
2023/04/10
 以前ご紹介した「Photoshopの代替品として使える「Pixelmator Pro」」の記事とは別の画像編集アプリケーションをご紹介します。ブラウザで利用で...