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

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

WEB関係

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

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

fonts.google.com/icons

普段はFont Awesomeにお世話になっていますが、良さそうなのでご紹介。
Font Awesomeについての記事はこちら

WEB FONTの読み込み

<head>〜</head>の間に下記を入力。

これでWEB FONTの読み込み環境が整いました。

記述する場所については特に指定はないですが、分からなかったら似たようなコードが書かれている部分でOKですよ。

問題ないだろうけど、うまく表示されなかったら読み込みの順番(行)とか変えてみてください。

 

 

ICONの表示方法

Font Awesomeとはちょっと違うのですが、感覚的に扱いやすいかと思います。

xxxの部分に各ICONに指定されているテキストを入れて表示させます。

 

表示例

<i class=”material-icons”>pets</i>
pets

<i class=”material-icons”>watch</i>
watch

サイズや色を指定も簡単ですよ

 

Googleの公式ドキュメントにも記載されていますが、classに追加する事でサイズや装飾なども指定できます。

 

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

 

 

 

 

 

 

 

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

関連記事

ペライチで宣伝用ページを作ってみる
2022/07/23
ペライチでホームページ作成って今までやったことなかったので、なんとなく触ってみたくなったので試してみました。この記事を書きながら作成していきます。  ...
Mac版のGIMPにレイヤー効果を追加
2022/07/14
GIMPにPhotoShopのようなレイヤー効果を追加する方法をご紹介します。Windows版のやり方やレイヤー効果を追加するファイルはすぐに見つかったのですが...
画像をWebPに変換してWEBサイトの表示測度を改善しましょう
2022/07/11
WebP (ウェッピー)は、トラフィック量軽減と表示速度短縮を目的としてGoogleが開発した次世代画像フォーマット(2010年に仕様公表・提供開始)のことで拡...
HTML/CSSのブラウザ対応状況を確認できるサイトまとめ
2022/07/06
HTML/CSSのサポート状況を確認できるサイトをご紹介します。最新の機能を使ってみたい方はチェックしてみると良いかもしれません。ちなみにHTML5は最終バージ...
『やさしい日本語』AIがホームページのテキストを在留外国人に伝わりやすい「やさしい日本語」へ変換
2022/07/05
日立社会情報サービスは、ホームページのテキストを通常の日本語よりも平易な日本語に変換することができる「『やさしい日本語』変換サービス」の販売を開始しました。 在...