質問: 【楽天】fontawesomeの文字化けについて お世話になります。楽天トップページに検索窓を付けたのですが、fontawesomeを利用して表示させた虫眼鏡マークが環境により文字化けしてしまいます。mac safari・ios safariでは理想通り表示され、chromeでは□、edgeでは空欄になってしまいます。どうしたらすべての環境で理想通り表示させられるでしょうか。よろしくおねがいします。
回答: 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 に変更する、など)