Font AwesomeのTwitterマークが□四角になり消えた！最新版に対応させ表示させた方法

Font AwesomeをHTMLタグ<i class="fa fa-twitter">で指定してたら、突然Twitterマーク→が表示されなくなったので、原因をサクッと調べました。

消えたマークを表示させたので、その工程をアップしますね。

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タグに登録している場合、変更してくださいね！

それでは、かうたっくでした❦