Googleマテリアルアイコンが表示されない時の解決策

WebサイトにGoogleマテリアルアイコン（Webアイコンフォント）を表示しようしたのですが、表示されませんでした。

表示されなかった原因と表示できるようになった解決策を紹介します。

該当コード

Googleマテリアルアイコンを挿入したコード部分です。

span属性の中のsearch部分は虫眼鏡アイコン（検索ボタンによく使われるアイコン）を使用したので、searchと記載されています。

<span class="material-icons">
 search
</span>

Googleマテリアルアイコン サイトURL「https://fonts.google.com/icons?icon.set=Material+Icons」

結論

結論を先に書くと、

Googleが指定したコードを変更しない（span属性の中身のHTMLを削除しない）

ことです。

詳細を解説しますので、下記の原因・解決策を読んでみてください。

原因

span属性の中のsearch部分を削除してしまった。

間違えた該当コード

以下は間違えたコードです。

search部分がアイコンの下部にラベルを表示するコードと勘違いし、削除してしまいました。

実はこのsearch部分に意味があり、削除してはいけなかったのです。

また、search部分を日本語に訳した「検索」に変更したり、別の文字列にしてもいけません。

解決した方法

表示できるように解決した方法は、search部分を削除せず、下記URLのGoogleが指定したコードを記載することです。

解決したコード

以下は正解のコードです。

以下コピペ用

<span class="material-icons">
 search
</span>

Googleマテリアルアイコン サイトURL「https://fonts.google.com/icons?icon.set=Material+Icons」

まとめ

Googleマテリアルアイコンが表示されない時の解決策について紹介しました。

みなさんもよい WordPressライフを〜

ではまた /