今さらですがＸ（旧Twitter）のアイコンを変更しました

コーポレートサイトにあるツイッターのアイコン（青い鳥）をＸのアイコンに変更した話です。

アイコンはWebフォントの Font Awesome 5 Free を使っています。

定義箇所

<a href="https://twitter.com/foobar" target="_blank">
    <i class="fab fa-twitter" alt="Twitter"></i>
</a>
<a href="https://www.facebook.com/foobar" target="_blank">
    <i class="fab fa-facebook" alt="Facebook"></i>
</a>
<a href="https://www.youtube.com/user/foobar" target="_blank">
    <i class="fab fa-youtube" alt="YouTube"></i>
</a>

Ｘのアイコンフォントは Font Awesome 5 では提供されておらず、バージョンを Font Awesome 6 に上げる必要がありました。
下位互換に対応しているようですが、今回はＸの公式サイトで配布しているSVGコードをコピペすることで対処します。

上記サイトでＸのロゴをダウンロードすると x-logo.svg というファイルが含まれているので、エディタで開き、SVGコードをコピペします。
width, height, fill はCSS側で指定するので省きます。

<a href="https://twitter.com/foobar" target="_blank">
    <!-- <i class="fab fa-twitter" alt="Twitter"></i> -->
    <svg viewBox="0 0 1200 1227">
        <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"/>
    </svg>
</a>

各アイコンはマウスホバー時、各Webサービスのブランドカラーに色が変わるようになっています。

SCSS

i {
	color: #fff;
	font-size: 36px;
	margin: 30px 20px 0 0;
	&:hover {
		color: #aaa;
	}
}
a[href*="twitter"]:hover i {
	color: #55acee;
}
a[href*="facebook"]:hover i {
	color: #1877f2;
}
a[href*="youtube"]:hover i {
	color: #da1725;
}

なので、SVGでもそれを実現するようホバー時にfillをセットしてあげれば完成です。
Ｘのブランドカラーは黒でした。

SCSS

svg {
	width: 36px;
	height: 36px;
	fill: #fff;
	margin: -14px 20px 0 0;
	&:hover {
		fill: #111;
	}
}