Elementor(エレメンター)でSNSのボタンを表示する際によく使うのが「ソーシャルアイコンウィジェット」です。
ソーシャルアイコンウィジェットは、エレメンターで標準で使えるウィジェットです。
elementor（エレメンター）標準のソーシャルアイコンウィジェットのツイッターアイコンが古い問題
ただ、一つ問題があるのが、ツイッターアイコンが旧ツイッターの鳥マークしか選択できず、新しいロゴの「X」が出てこない問題があります。
現在のエレメンターのバージョン：3.18.2
旧：
新：
elementor（エレメンター）のバージョンアップで改善される可能性はありますが、現段階で「Twitter（ツイッター）」が鳥のアイコンのままであり、「X」に対応できていません。
これはソーシャルアイコンウィジェットだけではありません。ソーシャルアイコンウィジェット同様、elementorでよく使う「アイコンライブラリー」に「X」と検索しても新ツイッターアイコンは出てきません。
アイコンライブラリーに「X」が表示されないのは、Elementor（エレメンター）が提供しているFontAwasomeのアイコンのバージョンが5.15.3までだから
原因は、エレメンターが読んでいるFontawasomeのバージョンが5.15.3のせい。
Fontawasomeは旧ツイッターの鳥のアイコンも、無料版で新しい「X」のアイコンも対応していますが、それはバージョン6.1からです。
厄介なのは、FontawasomeもElementorもプロにすれば解決する、というものではない、ということです。
Elementor（エレメンター）にFontAwasomeのバージョンを切り替える設定はない
何かと細かく設定が可能なElementorですが、意外にもFontAwasomeのバージョンを切り替える設定はありません。強いて言えば、FontAwasome4アイコンを正しく読むための設定がElementor→設定→高度な設定内にあるくらいです。
これは新しいバージョンを切り替えるものではありません。
FontAwasomeの公式プラグインを入れても、Elmentorの読み込みバージョンは変わらない
ワードプレスでFontAwasomeを使うときによく使われている公式のプラグインがあります。
こちらのプラグインでは、設定画面でバージョンの切り替えができますが、これはあくまでブロックエディタやクラシックエディタでの挙動の設定。Elementorでは反映されません。
Elementor（エレメンター）でXのアイコンを表示させる方法
エレメンターのバージョンアップで対応されるかもしれませんが、ツイッターがXに変わってからもうだいぶ経っており、サイトもXのアイコンにしたい頃です。
エレメンターのソーシャルアイコンウィジェットやアイコンウィジェット他、FontAwasomeを選択する画面でXアイコンを使う方法を紹介します。
アイコンライブラリーの検索で「X」と検索しても出てこないので、SVGで対応する
冒頭でお伝えした通り、ElementorのアイコンライブラリーではFontAwasomeでは「X」と検索しても、Xアイコンは出てきません。
したがって、別途XのSVGファイルで対応する策を取りたいと思います。
1.XのSVGデータを手に入れるために、Fontawasomeのページにアクセスします。
検索窓に「X」、検索先のバージョンは「6.5.1」と指定して、検索します。
2.スタイリングツールのリンクをクリックして展開。
3.スタイリングツールのカラー選択部分で、カラーをお好みのものにします。
白：R255 G255 B255
黒：R0 G0 B0
以下の作業を繰り返して、何色か事前に作っておくのも手です。（別名で保存をして、先に作っておく）
色を設定したら、ポップアップ画面上のダウンロードボタンをクリックします。
すると、SVGファイルがダウンロードできるので、任意の名前を付けてPCの任意の場所に保存しておきましょう。
ソーシャルアイコンやアイコンウィジェットでの、アイコンの設定画面にて、「SVGをアップロード」を選択します。
先ほどFontAwasomeからダウンロードしてきたSNGファイルをアップロードし、選択し「メディアを挿入」ボタンをクリックします。
（上の画像は白を選択した状態です）
はい、このように「X」マークが入りました。
この後、リンクやサイズ、色などをお好みで調整してください。
アイコン自体の色はElementor上では変えられないので、その都度SVGファイルを作り直す必要がありそうです。
ElementerのFontawasomeがバージョン6に対応するまで少しの辛抱です
そもそも、エレメンターのアイコンライブラリーのFontawasomeが6～のバージョンにアップすれば、通常通りにXアイコンが表示され、選択できるようになるはずです。
おそらく、エレメンターのバージョンアップで順次対応されるはずですが、それまではSVGファイルで対応しておきましょう。
また、Xアイコンだけでなく、アイコンライブラリーに表示されない他のアイコンも、同じ方法で対応ができますので、この方法は知っておいて損はないと思います。
おためしあれ！
コメント