Twitterが死んだので"X"に変えないといけないFont Awesome愛用者へ

残念ながら長らく親しんだツイッターの青い小鳥は、ツイッター社のアイデンティティからは完全に消滅されようとしています。

こちらは以前のツイッターのUIを示した公式のドキュメントです。

そしてこれが今の実際の埋め込みタグ。

以前までは右上にあった青い鳥マークが、無慈悲にも"X"に変更されています。

WEB制作の現場では

私は普段のWEB制作ではアイコンを画像で埋め込むということはなく、Font Awesomeを用いてWEBフォントで実装することがほとんどでした。
https://fontawesome.com/
非常に便利だったので、HTMLソースはこのまま使い続けCSSで強引に変更できないかと考えました。

だいたいこういう表記で実装しますね。

<i class="fa-brands fa-twitter"></i>

CSSで強引に変更するコード

じつは"X"のロゴ、黒板太字という特殊文字の　𝕏　をそのまま使っているようです。
コードで言うと 「U+1d54f」 。

文字化けさえ起きなければそのまま使ってXのロゴとして暫定的に代用できるでしょう。

.fa-twitter:before {
    content: '𝕏';
    font-family: unset;
    font-weight: bold;
}

コーディング例

既存サイトのCSSに追加するだけで全てのFont Awesomeの鳥を”X"にすることが可能です。
画像やその他の方法で示しちゃってる場合は、それぞれ対応が必要ですね…。

印刷物などへの影響も今後は大変ですね。

余談

以前の青い鳥のアイコンは、黄金比が取り入れられ美しいものでした。

「おい、イーロンマスク！この素晴らしいアイコンを、なぜいきなり なんの変哲もないただの”X"にしてしまったんだ…」と、グラフィックデザイン界隈のクリエイターは嘆き悲しんでいます🐥💦

ツイッターのブランドガイドラインのPDF資料は、今のところまだ見れるようなのでよかったら完全に消滅する前に見てみてください。
https://about.twitter.com/content/dam/about-twitter/en/brand-toolkit/downloads/twitter-external-brand-guidelines-01272021.pdf