【楽天】FontAwesomeの文字化けについて

Question

お世話になります。

楽天トップページに検索窓を付けたのですが、FontAwesomeを利用して表示させた虫眼鏡マークが環境により文字化けしてしまいます。

mac safari・ios safariでは理想通り表示され、Chromeでは□、Edgeでは空欄になってしまいます。

どうしたらすべての環境で理想通り表示させられるでしょうか。

よろしくおねがいします。

Accepted Answer

ECマスターズの田中です。

FontAwesomeのような、ウェブフォントを利用したデザインは、
rakuten.co.jp上のページ、つまりトップページやカテゴリ・商品ページでは
セキュリティ上の制限を解決できず、利用することができません。
制限の詳しい内容は、下記URLの記事をご参照ください。
http://webfontfan.com/bolg/?p=185

そのため、スマートフォンページのように、
画像を利用してご設置いただきますようお願いします。

ヘッダーコンテンツ内ではbuttonタグの利用は禁止されておりますが、
スタイルシートを利用してinputタグの背景として設定していただくことができます。

inputタグのvalueに記載された文字を削除していただき（つまりvalue=""の状態）、
.search_container input[type="submit"]
の規則に対して、下記プロパティを追記していただきますようお願いします。

background-image: url(虫眼鏡画像のURL);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
box-sizing: border-box;

ボタンに対して画像が大きすぎる場合は、
borderを太くすることで縮めることができます。
（1px を 7px に変更する、など）

Answer

ECマスターズの塚本です。

いただいたご質問ですが担当より
お調べしまして回答させていただきます。

回答まで今しばらくおまちくださいませ。

Answer

わざわざありがとうございました！
画像で対応したいと思います！