update X/Twitter logo (#1454)

Update font-awesome link to a newer version that includes a newer
X/Twitter logo. Something changed about the way the CSS is structured,
such that loading just the brands.min.css file is not sufficient to
apply the proper font-family setting, so tweak custom.css to fix this.

Author: kenjenkins

docusaurus.config.js

@@ -233,7 +233,7 @@ const config = {
   },
   stylesheets: [
     'https://fonts.googleapis.com/icon?family=Material+Icons',
-    'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/brands.min.css',
+    'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/brands.min.css',
   ],
   plugins: [
     [

src/css/custom.css

@@ -242,3 +242,7 @@ td > .theme-code-block:last-child {
 .tabs-container .tabs {
   margin: -12px -12px 0;
 }
+
+.fa-brands, .fab {
+  font-family: "Font Awesome 6 Brands";
+}

src/theme/Footer/Links/MultiColumn/index.js

@@ -64,7 +64,7 @@ export default function FooterLinksMultiColumn({columns}) {
             <IconButton
               color="primary"
               onClick={() => window.open('https://twitter.com/pomerium_io')}>
-              <span className="fa-brands fa-twitter" />
+              <span className="fa-brands fa-x-twitter" />
             </IconButton>
           </li>
           <li style={{display: 'inline-block'}}>