CSS colors for Fontawesome icons do not work.

[AAriam]

The documentation says I can color Fontawesome icons like so:

i.fa-twitter-square:before {
   color: #55acee;
}

First, it's fa-square-twitter and not fa-twitter-square. Regardless, it does not work. For example, with the following conf.py (clean project with sphinx-quickstart):

html_static_path = ['_static']
html_css_files = ["styles.css"]
html_theme_options = {
   "icon_links": [
           {
               "name": "Twitter",
               "url": "https://twitter.com",
               "icon": "fa-brands fa-square-twitter",
           },
       ],
}

and _static/styles.css:

i.fa-square-twitter:before {
   color: #55acee;
}

the icon is still in the default grey color.
The only way I could get it to work was by targeting the class directly:

.fa-square-twitter {
   color: #55acee;
}

but since I wanted to add the color on hover, I had to do this:

a:hover .fa-square-twitter {
    color: #55acee
}

I'm using v0.16.1 with Sphinx 8.1.3.

[drammock]

You're correct that the example still uses the old name for that icon, it should be fa-square-twitter. You're also right that the example still doesn't work even if you fix that. That's because we switched to embedding the icons as svg nodes instead of i nodes (which also makes the ::before part incorrect). The guidance should be:

svg.fa-square-twitter {
    color: #55acee;
}

I'll open a quick PR. Thanks for flagging the mistake.