Font Awesome Pro Light in CSS pseudo element content

[simeoned]

Thanks for the response to this topic explaining how to use it directly in markup.:

Using font awesome icons in my markup

Hi, am I missing something simple? I’m creating a bunch of list items in a text element (or raw content if I decide to do that instead) and I want to place 1 or 2 Font Awesome icons next to a select few. I would have thought that simply doing this would work out of the box: <ul> <li data-feature="Some Data">List Item <i class="fa fa-question-circle" aria-hidden="true"></i></li> <li data-feature="Some Data">List Item <i class="fa fa-question-circle" aria-hidden="true"></i></li> <li data-feature=…

I need to know how to get the light icons to show up as CSS content in a pseudo element. I see no reason what this should not be able to be achieved - I’m just not seeing any documentation for it. Font Awesome Pro is bundled with Pro, so what is the proper methodology for getting the results I’m looking for?

Here’s what doesn’t work:

.select-wrapper:after{
     font-family: fontawesome;
     content: '\f078';
     font-weight: 100;
}

All this does is still display the regular thick icon. Please have a look at this and let me know you’re thoughts.
Thanks in advance for your work.

[ruenel]

Hello @simeoned,

Thanks for writing in!

When using custom CSS and reference the Font Awesome, you use the following:

FontAwesome        - Solid face as one family.
FontAwesomeRegular - Outline face as one family.
FontAwesomeLight   - Light face as one family.
FontAwesomeBrands  - All branded icons.
FontAwesomePro     - Solid, Regular, and Light faces setup as weights of a single family.

Best Regards.