iosでアイコンの表示をすると黒色の部分が白色で表示される

Question

ios safariでのアイコン表示がおかしくなります。

現在webアプリを作成している最中で、お気に入り機能を実装しています。

そこでお気に入りボタンに使うアイコンをfontawesomeで取得し表示したところ、edgeやchromeでは正しく表示されるのですが、iosで表示した場合アイコンが正しく表示されませんでした。

実際に表示される画像は下の２のような画像になるはずなのですが、iosで表示されるときは黒色の部分が真っ白になって表示されてしまいます。

これまで解決のために行ったことは、iosやsafariなどでの表示方法がおかしくなる例としてinputやimgタグの指定方法の違いなどがあったのですが、どれも該当せず困っています。

またfontawesomeに原因があるのではないかと考え現在lineawesomeというアイコンの種類を使って実装しています。
コードを下記に表示します。

html

<button class="favorite_btn" type="submit" name="submit_del"  value="お気に入り済み"><i class="las la-star"></i></button>

こちらはfontawesomeではなくlineawesomeなためcssでのfont-familyやfont-weightは指定していません。
またCDNについても省略させてもらいました。

よろしければご教授いただけると幸いです。

Comments

[Lhankor_Mhy]

問題が再現するコードをご提示ください。