Fix X share button icon and color, close #5221

CHANGELOG.md

@@ -7,6 +7,10 @@
 - Add a "Share on Bluesky" button (#5179)
 - Add preset variables for modern font stack (#5033)
 
+### Bug Fixes
+
+- Fix wrong icon and color for X share button.
+
 ## [4.27.0](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.27.0)
 
 ### Enhancements

_includes/social-share.html

@@ -2,7 +2,7 @@
   <h4 class="page__share-title">{{ site.data.ui-text[site.locale].share_on_label | default: "Share on" }}</h4>
 
   <a href="https://x.com/intent/tweet?{% if site.twitter.username %}via={{ site.twitter.username | url_encode }}&{% endif %}text={{ page.title | url_encode }}%20{{ page.url | absolute_url | url_encode }}" class="btn btn--x" aria-label="Share on X" onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }} X">
-    <i class="fas fa-fw fa-share-alt" aria-hidden="true"></i><span> X</span>
+    <i class="fab fa-fw fa-x-twitter" aria-hidden="true"></i><span> X</span>
   </a>
 
   <a href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | absolute_url | url_encode }}" class="btn btn--facebook" aria-label="Share on Facebook" onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }} Facebook">

_sass/minimal-mistakes/_utilities.scss

@@ -218,7 +218,7 @@ $text-alignments: left, right, start, end, center, justify;
     $soundcloud-color: ".fa-soundcloud",
     $stackoverflow-color: ".fa-stack-exchange, .fa-stack-overflow",
     $tumblr-color: ".fa-tumblr, .fa-tumblr-square",
-    $twitter-color: ".fa-twitter, .fa-twitter-square",
+    $twitter-color: ".fa-twitter, .fa-twitter-square, .fa-x-twitter",
     $vimeo-color: ".fa-vimeo, .fa-vimeo-square, .fa-vimeo-v",
     $vine-color: ".fa-vine",
     $xing-color: ".fa-xing, .fa-xing-square",