Font-awesome: Improve instructions for CSS Pseudo-elements and Brands

[SaswatPadhi]

Steps 2 and 3 of the instructions at https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define say:

1. Set the font-family to Font Awesome 5 Free or Font Awesome 5 Pro (depending on which one you are using)
2. Set the font-weight: 900 (Solid), 400 (Regular or Brands), 300 (Light)

It didn't work for me when I tried using font-family: "Font Awesome 5 Free"; and font-weight: 400 for the Twitter icon (F099).

I think the options mentioned for the font-family need to be updated to Font Awesome 5 (Solid|Regular|Light|Brands|Free|Pro). Using font-family: "Font Awesome 5 Brands"; works as expected for F099 icon.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community and thanks for reporting this.

I think the options mentioned for the font-family need to be updated to Font Awesome 5 (Solid|Regular|Light|Brands|Free|Pro). Using font-family: "Font Awesome 5 Brands";

solid, regular, and light styles are set via font-weight property. The instructions are actually missing the Font Awesome 5 Brands font-family, even if there is a proper example in the very same page (just scroll up a little bit)

Anyway, it is better to have all the three options mentioned there

Let's assign to @talbs

My suggestion:

Before

Set the font-family to Font Awesome 5 Free or Font Awesome 5 Pro (depending on which one you are using)

After

Set the font-family to Font Awesome 5 Free, Font Awesome Brands, or Font Awesome 5 Pro (depending on which one you are using)

[SaswatPadhi]

Ah yes, the example code above those instructions actually does mention "Brands" font-family.

Thanks.

[talbs]

Sorry for the radio silence on this issue, folks. Thanks for bringing this good point (and suggestions) up, @tagliala and @SaswatPadhi.

I've taken @tagliala's direction and implemented it in our CSS pseudo-elements docs. That change should be live on the site shortly.

[talbs]

Just following up here, gang. This improvement to the docs is now live at https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define. Thanks much for bringing this to our attention and for the awesome suggestion, @tagliala. 😄

[tagliala]

@talbs you're welcome, but actually I still can't see the change