DOC - Fix brand color example (#2104)

closes #2103

Author: drammock

docs/user_guide/header-links.rst

@@ -134,12 +134,10 @@ Here are several examples:
 
    .. code:: css
 
-      i.fa-twitter-square:before {
+      svg.fa-square-twitter {
          color: #55acee;
       }
 
-   This has already been added for the brands that have *shortcuts* (:ref:`see below <icon-link-shortcuts>`).
-
 Image icons
 -----------
 

src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss

@@ -35,7 +35,7 @@ ul.navbar-icon-links {
   list-style: none;
 
   // Icons styling
-  i {
+  svg {
     &.fa-brands,
     &.fa-regular,
     &.fa-solid {
@@ -44,18 +44,13 @@ ul.navbar-icon-links {
       font-size: var(--pst-font-size-icon);
     }
 
-    /* Social media buttons hard-code the brand color */
-    &.fa-square-twitter::before {
-      color: #55acee;
-    }
+    /* We no longer color the social media icons in their brand colors (makes a11y harder)
+       but this one is left in as an example in case we decide to go back to it someday:
 
-    &.fa-square-gitlab::before {
-      color: #548;
-    }
-
-    &.fa-bitbucket::before {
-      color: #0052cc;
+    &.fa-square-twitter {
+      color: #55acee;
     }
+    */
   }
 
   // Force images to be icon-sized