Font AwesomeをHTMLタグ<i class="fa fa-twitter">
で指定してたら、突然Twitterマーク→が表示されなくなったので、原因をサクッと調べました。
ちなみに導入してない人用に書いたページは以下です。
LINKWordPress・CMSでFont Awesomeアイコンフォントを導入!最新アイコンが表示しないとき、バージョンアップ方法
消えたマークを表示させたので、その工程をアップしますね。
WordPressの記事に置いたTwitterマークが消えた様子

記事下の消えたTwitterマーク
いつも記事下にTwitterマークを置いて、Twitterリンクを付けてたのが突然消えた様子。

サイズ変更したTwitterマーク、2か所も消えた
もちろん記事内に置いた、大きなTwitterマークも全て消えました。
Font Awesome<i class="">HTML指定が変わった
以下リンク先をみるとHTML指定する場合のclass名が変わったようです。※そのた詳細は以下をチェックしてください。
LINKUpgrading from Version 4|Font Awesome
-
- バージョン5 <i class=”fa fa-times“></i>
- 以前のもの<i class=”fa fa-close“></i>
-
- バージョン5 <i class=”fa fa-image“></i>
- 以前のもの<i class=”fa fa-picture“></i>
-
- バージョン5 <i class=”fab fa-twitter”></i>
- 以前のもの<i class=”fa fa-twitter”></i>
-
- バージョン5 <i class=”far fa-circle“></i>
- 以前のもの<i class=”fa fa-circle-o“></i>
消えたTwitterのアイコンを表示させる
HTML(WordPressの場合ビジュアルではなくテキスト)に書いたコードの<i class="fa fa-twitter"></i>
だったHTMLを<i class="fab fa-twitter">
と変更すればOKです。
ページを開いてとfa fa-twitter
ブラウザの機能Ctrl+Fキーでページ内検索すれば早いのでオススメ❦
念のため、以下にリンクを置いときますね。
LINKVersion4.7.0のTwitterアイコン|FontAwesome
LINKVersion5のTwitterアイコン|FontAwesome
WordPressで一括でアイコンのHTMLを変更
WordPressを使っている場合、一括でHTMLを置換できるプラグインが便利です。
プラグインSearch RegexでHTMLを一括変更していきます。
データベース(記事内部)を編集するのと同じだけど一括操作するのでどの記事のどの部分を編集するかチェックしたほうが安心です。
やり方は凄く簡単ですが、一歩間違うと面倒臭いので。※私は慎重にチェックして行ったつもりです❦
Search Regexで、TwitterアイコンのHTMLを一括置換
Search Regexを『プラグイン』より『新規追加』、右上の『キーワード検索』より『Search Regex』と入力し導入したら有効化してください。
WordPress管理画面にある『ツール』『Search Regex』と選択すると、以下画像のように入力します。

プラグインで消えたTwitterの古いHTMLをSearch!
Post contentは、翻訳すると記事内容とGoogleさんが翻訳してくれます。本文だけ変更するので、ココは何も触りません。
Search pattern:検索したい文字列
Replace pattern:置換したい文字列
Search pattern:<i class="fa fa-twitter"
Replace pattern:<i class="fab fa-twitter"
これでSearchをクリック。

見つかった古いHTML。これら全チェック❦
このように置換前の文字が出るのをすべてチェックし、間違いなければ一括置換Replace & Saveをクリックして実行します。
- 漏れがないかチェックのため
class="fa fa-twitter
をSearch - 問題なければOK!
私の場合、漏れがあったので、class="fab fa-twitter
を置換したい文字列に入れて同じ工程をやったあと、再度Replace & Saveしました。※漏れは記事内に置いた大きなTwitterマーク

無事復活したことを確かめる
さいごに
これでツイッターのアイコンは無事表示されました!
まぁ~、、色々ありますね…^^;
adQuickタグに登録している場合、変更してくださいね!
その他のFont Awesome情報は以下をどうぞ。
LINKWordPress・CMSでFont Awesomeアイコンフォントを導入!最新アイコンが表示しないとき、バージョンアップ方法
それでは、かうたっくでした❦
Comments