質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PWA(Progressive Web Apps)

PWA(Progressive Web Apps)は、アプリのようなWebサイトを指します。仕様が異なる様々なデバイスで表示でき、インストールも不要。さらに訪問し続けることでユーザーについて学び、強力なPWAとなります。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

0回答

1649閲覧

FontAwesomeでアイコンが四角になって表示されない

BiSH0400

総合スコア12

PWA(Progressive Web Apps)

PWA(Progressive Web Apps)は、アプリのようなWebサイトを指します。仕様が異なる様々なデバイスで表示でき、インストールも不要。さらに訪問し続けることでユーザーについて学び、強力なPWAとなります。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

1クリップ

投稿2019/03/08 08:08

編集2022/01/12 10:55

Wordpressで作成したWebサイトでFontAwesomeのアイコンが表示されなくなりました。
有料のテーマを使用しており今までは問題なく表示されていました。

関係あるかはわかりませんがmanifest.jsonとServiceWorker.jsを追加しPWA対応のテストをしたあたりから表示されなくなりました。
PWAチェックはchromeの検証で問題ありませんでした。

PCでキャッシュの消去とハードの再読み込みをすると表示されます。
PCでの動作後にスマホで再表示すると表示されるようになります。
ただしブラウザを閉じ再度を開くと表示されません。

通常の更新では表示されません。

シークレットモードでは表示されます。

別のブラウザや端末でいくつか検証しましたが同じ症状です。

これは何が問題でどこをどう修正すればいいでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Sohaya

2019/03/08 10:07 編集

・manifest.jsonとServiceWorker.jsを追加した目的(そもそも何をしようとされていたのか) ・WordPressのバージョン、テーマ名・バージョン ・FontAwesomeの実装方法(テーマに組み込まれているのか、BiSH0400さんご自身で実装されたのか、プラグインを使用されたのか 等) このあたりが質問に記載されていないので どこから探りを入れたらよいか まだわからないのですが 気になったことをお尋ねします。 ・manifest.jsonとServiceWorker.jsを追加する前の状態に戻すことは可能ですか。元に戻しても現象は再発していますか。 ・WordPressログイン中とログアウト後で表示は変わりますか。
BiSH0400

2019/03/11 02:50 編集

Sohaya さん 説明不足ですいません。 ・manifest.jsonとServiceWorker.jsはサイトをPWA化するために追加しました。 ・WordPressのバージョンは5.1、テーマはSTROK(子テーマを使用しカスタマイズしています)、バージョン1.2.3 ※前バージョンでも同様の現象はありました。 ・FontAwesomeはテーマに組み込まれているものです。 ・WordPressログイン、ログアウトで変化はなかったです。 ・manifest.jsonとServiceWorker.jsを追加する前に戻しましたが変化はなかったです。 ※headerのタグありなしでシークレットモードで変化がありました。 タグありの場合は最初に開くページ(トップページや子ページ)はアイコンが表示されますが、別のページへ移動するとアイコンが表示されなくなり、最初に開いたページに戻るとアイコンが表示されなくなります。 <link rel="manifest" href="URL/manifest.json"> <link rel="apple-touch-icon-precomposed" href="URL/images/512.png" sizes="512x512"> <script> document.addEventListener('DOMContentLoaded', function() { if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('../ServiceWorker.js').then(function(registration) { console.log('success: ', registration.scope); }, function(err) { console.log('failure: ', err); }); }); } }, false); </script> <meta name="theme-color" content="#ff00ff"> <meta name="apple-mobile-web-app-title" content="サイト名"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> ServiceWorker.jsのパスやルートディレクト以外の配置も試しましたが変化はなかったです。
Sohaya

2019/03/11 19:35 編集

現象は STROKの親テーマでも出ていますか。 FontAwesomeが表示されるときと 表示されないとき、 font-familyの値は それぞれどのようになっていますか。 --- これは別の経験談なのですが WordPressを更新したら 管理画面のメニューバーのWebフォント(IcoMoon)や ビジュアルエディタのインタフェイスのアイコン(TinyMCEオリジナル)が すべて文字化けしたことがありましたが、 その際 font-familyの値がすべて「Arial」になっており、 ビジュアルエディタ『TinyMCE Advanced』や 日本語化プラグイン『WP Multibyte Patch』を更新したところ font-familyの値が改善されたのか 文字化けが直ったことがありました。 --- 『(上記コメントの後半に書かれている)タグコードを記述していると  現象が出る(削除すると現象は出ない)』 という解釈で合ってるでしょうか。
BiSH0400

2019/03/12 09:53 編集

親テーマにするとシークレットモードのみアイコンが表示されました。 上記のタグコードが現象が一部変わりますが表示しないのは同じです。 font-familyの値はどちらも同じでした。 親テーマで表示されたということは上記コード、ServiceWorker.jsの記述かもしれません。 https://blog.simmon.design/pwa-for-wordpress/ 上記が参考サイトです。
Sohaya

2019/03/12 15:12

参考サイト、ありがとうございます。 > 最初に開くページ(トップページや子ページ)はアイコンが表示されますが、 > 別のページへ移動するとアイコンが表示されなくなり、 > 最初に開いたページに戻るとアイコンが表示されなくなります。 この流れですと 一連のスタイルやスクリプトファイルの読み込みが完了すると PWA化(オフライン化)によって外部リソースであるFont Awesomeを 参照できなくなってしまったのではないか、そんな気がしました。 Service Worker自体の問題点ならば 類似のケースで困ってる方がほかにもおられるだろうと思い 「Service Worker フォント」で検索してみたところ 以下の情報が見つかりました。 https://qiita.com/kinu/items/2abd61b4390f9bbaffc9 『oninstall でキャッシュに入れなかった Web フォントのデータは返すことができないため、  見ての通りリロード後は Web フォントが使われていません。』 と書かれており、解決策も掲載されているようです。 BiSH0400さんの環境改善の一助になれば幸いです。
BiSH0400

2019/03/13 03:13

Sohayaさん 回答ありがとうございます。 さっそく調べて試してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問