マテリアルアイコンがクロームだけ表示されません。

マテリアルアイコンがクロームだけ表示されません。
四角になってしまいます。

ファイヤーフォックス、IE、NEXSAS5では問題なく表記されます。

もちろんインターネットにつながっています。

・html

<div id="gototop"><a href="#top"><i class="material-icons"></i>^</a></div>

・css
[id="gototop"] a:visited {
font-size: 18rem!important;
text-shadow: .1rem .1rem .2rem rgba(0,0,0,.9);
color: white;
}

グーグルが提供しているアイコンなのに、クロームで表記できないなどありうるのですか。
下記を貼り付けても、expand_lessという文字がそのまま出てしまいます。
<i class="material-icons">expand_less</i>
https://design.google.com/icons/#ic_expand_less

行動規範の内容に同意します

回答1件

ベストアンサー

その文字は正式なユニコード文字ではないそうなので、ブラウザによっては表示されないことがあります。
http://www.fileformat.info/info/unicode/char/e5ce/index.htm

下記のコードで、Chromeでも表示されることは確認しました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
5	<title>Document</title>
6</head>
7<body>
8	<div id="gototop"><a href="#top"><i class="material-icons">&#xE5CE;</i></a></div>
9	<i class="material-icons">expand_less</i>
10</body>
11</html>

投稿2016/02/04 08:30

編集2016/02/06 10:42

yamato_hikawa

総合スコア2092

退会済みユーザー

2016/02/04 10:07

グーグルが提供しているアイコンなのに、クロームで表記できないなどありうるのですか。下記を貼り付けても、expand_lessという文字がそのまま出てしまいます。 <i class="material-icons">expand_less</i> https://design.google.com/icons/#ic_expand_less

退会済みユーザー

2016/02/06 02:31

あきらめるしかないということでしょうか？

yamato_hikawa

2016/02/06 03:38 編集

HTML上で下記の読み込みは行っていますか？そもそもアイコンフォントを使う準備がなされていない気がします。 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 参考 http://google.github.io/material-design-icons/#icon-font-for-the-web ファイアフォックス等で表示されるものは、その文字コードに標準で結びつけられている文字だと思います。

退会済みユーザー

2016/02/06 06:41

もちろんやっています。  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> PCのクローム以外はネクサス５も含めてちゃんとひょうきされています。

yamato_hikawa

2016/02/07 02:22

回答に記述を追加しました。

退会済みユーザー

2016/02/09 04:36

何も変更していないですが、四角だったものが、矢印に変わっていました。理由はわかりません？

行動規範の内容に同意します