iOSのみで文字化けが発生する問題

iOSで□の中に×があるような記号（☒）の文字化け発生する

先日、iOSのでWebページを確認したところ、以下の画像のような□の中に×があるような記号（☒）があることがわかりました。
![]
他のブラウザ、OSで確認しましたが、やはりiOS特有の事象のようでした。
■Mac
・Safari　問題なし
・Chrome　問題なし
■Windows
・Chrome　問題なし
■Android
・Chrome　問題なし
■iOS
・Safari　文字化け
・Chrome　文字化け

どなたかデザインに詳しい方、原因と解決法を教えていただけないでしょうか。

※補足
Wordpressで投稿したWebページ上で上記のような事象となっています。
また、全てに記号（☒）がつく訳ではなく、一部のみになっています。
文字化け例2

html
<!DOCTYPE html>
<html>
<head>
    <!-- 文字コードの指定 -->
    <meta charset="utf-8">
    <!-- IEで常に標準モードで表示させる -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport(レスポンシブ対応) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php if(is_category() | is_archive() | is_search() | is_tag() | is_paged()): ?>
    <meta name="robots" content="noindex,follow">
    <?php endif; ?>
	<!-- seo -->
	 <?php wp_head(); ?>
    <!-- css -->
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_template_directory_uri(); ?>/css/style.css">
</head>
<body>
<ul>
    <li>フロントエンド</li>
    <li>バックエンド</li>
</ul>
</body>
<style>
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, メイリオ, Meiryo, sans-serif;
  background-color: #F7F7FB; 
}
ul {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 50px;
    background-color: #fdfdfd;
    border: dotted #0e9cc7 1px;
    color: #1e366a;
    word-break: break-all;
    word-wrap: break-word;
}
</style>