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に追加する事でサイズや装飾なども指定できます。

 

アイコン数などこれからですが、扱いやすいとは思うので是非お試しください。

 

 

 

 

 

 

 

ホームページ制作ならRU DESIGN
「スタードメイン」は、年額100円からの独自ドメイン+無料サーバーも付いてきます。
WordPressも使えるので、練習も兼ねてお手軽にサイト運営ができちゃいます。


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

関連記事

Photoshopの代替品として使える「Photopea」
2023/04/10
 以前ご紹介した「Photoshopの代替品として使える「Pixelmator Pro」」の記事とは別の画像編集アプリケーションをご紹介します。ブラウザで利用で...
WEBサイトの集客・宣伝についての戯れ言
2023/04/07
 今更感はありますが、この「RU DESIGN」のサイトでは、Googleアドセンスによる自動広告や各種アフィリエイトへのリンク等を表示・添付させてもらってます...
GPT-4を駆使したロゴデザインサービスのサービス提供を開始
2023/03/19
 GenAi合同会社は、AI技術であるGPTとプロのデザイナーがコラボレーションし、ロゴデザインを素早く提供するサービス「Aden」を開始。画像生成AIを活用し...
「AIOne」GPT-4を無制限で無料提供中(期間限定)
2023/03/19
 Topaz合同会社は、画像生成AIを始め様々なAIを手軽に利用可能なAIプラットフォーム「AIOne」を通じて、「GPT-4」を2023年3月18日から無制限...
noteにAI機能追加と、ワードプレスのChatGPTを利用した自動投稿について
2023/03/02
 noteにAI機能が追加されたみたいです。note AIアシスタント(β)と言う名称で、現在は一部のクリエイター向けにのみ提供されている機能になります。ついで...