WatchiPadiPhoneMacガジェット家電デスク周りアプリ・Webサービスインターネット関連ブログ運営プログラミングお問い合わせらけガジェット大好きエンジニア元々ネットワークエンジニアでしたが、残業と出張だらけの生活が嫌になりプログラミングを勉強して転職。現在は在宅ワークでプログラマとして働いています。Apple製品・ガジェット・家電が好きなので、実際に使ってみたレビュー記事をメインに書いてます。2021年10月22日プラグインをインストールしたら急にSNSのアイコンが表示されなくなった・・・つい先日、プラグインをインストールしたらプロフィール下と記事したのSNSアイコンが表示されなくなるという問題が発生しました。この部分のアイコンです。本記事では、このアイコンが表示されなくなってしまう原因と対処方法について解説します。本サイトではなく別サイトなのですが、WordPressのテーマである「AFINNGER5」を先日から使い始めました。Button」(通称BFB)を導入したんですよね。すると、プロフィール下のアイコンがこのように表示されなくなってしまいました。プロフィール下だけでなく、記事下のアイコンも同じように消えていました。Chromeの開発者ツールを使うことで、原因がわかりました。ChromeでF12を押すことで表示できます。1をクリックしてから、消えているTwitterアイコンをクリックします。すると、該当のコードが表示されます。今回の場合2の行ですね。3をクリックして、アイコンの読み込み先情報を確認します。Solid」と書かれていますね。Solid」から読み込んでいるということがわかります。正常に表示されているときはどうでしょうか?プラグインのBFBを、いったん無効化して確かめてみます。すると、読み込み先が「FontAwesome」となっているのがわかりますね。Solid」と「FontAwesome」が具体的にどう違うのかは不明ですが、アイコンの読み込み先が違っているのが原因ということがわかりました。SNSアイコンが表示されなくなったときの対処方法アイコンが表示されない原因がわかったので、対処していきましょう。読み込み先を、正常に読み込めている「FontAwesome」へと変更すればいいのです。読み込み先を変更するには、CSSの追加を行います。「外観」→「カスタマイズ」の順にクリックします。すると、カスタマイズ画面が表示されるので、その中から「追加CSS」をクリックします。"FontAwesome"!important;}と書き込みます。これでTwitterアイコンの読み込み先を「FontAwesome」へと変更することができます。i.fa.fa-twitter::beforeの部分を変更することで、他のアイコンにも適用ができます。i.fa.fa-get-pocket::beforeこれらを必要なだけ「追加CSS」へとどんどん追加して、「公開」をクリックすることで完了です。ちなみに、上記で紹介したもの以外のアイコンも取得できます。開発者ツールを表示し、こちらの1をクリックします。その状態で、設定したいアイコンの上にマウスカーソルを持っていくと、このように表示されます。Twitterのアイコンなのでi.fa.fa-twitter::beforeと表示されてますね。このように、設定したいアイコンの値を確認して、先ほどご紹介した方法で追加CSSを書き込むことで、だいたいのアイコンの取得先を変更することができます。Button」をインストールしたらSNSのアイコンが表示されなくなりました。CSSを追加してアイコンの読み込み先を変更することで解決することができました。Chromeの開発者ツールを使うことで取得ができます。BFBだけでなく、他のプラグインでも同じような問題が起こったときも、この方法できっと解決することができます。参考になれば幸いです。Awesomeのアイコンを使いたいけど、サイトが重くなっちゃうな。こんな悩みを解決します。@wynn_smaよかったらシェアしてね!URLをコピーしました!らけガジェット大好きエンジニアApple製品とガジェットが大好きな引きこもりエンジニアです。基本的に家から一歩も出ずに生活しています。在宅ワークをもっと快適にするためのガジェットや、環境作りについての記事をメインに書いてます。