CODEWITHSUNDEEP
cssfont-awesomeuser-experiencefont-awesome-6
Griffin Pair
Griffin Pair

Reputation: 175

How to make Font Awesome Icons solid when using Font Awesome 6 Pro

I have the following pseudo-css rendering the correct Font-Awesome icons, but just not as solid icons:

content: "\f0dc";
font-family: 'Font Awesome 6 Pro';
padding-left: 5px;
font-weight: 900;

This renders the icons as "regular" => enter image description here not as solid icons.

What do I need to do to have these icons render as solid icons?

Upvotes: 1

Views: 2099

Answers (2)

Pierre Lovergne
Pierre Lovergne

Reputation: 57

Looking at the documentation you do that by specifying a font with a variable which would be

font: var(--fa-font-solid);

https://docs.fontawesome.com/web/setup/upgrade/pseudo-elements

screenschot of the doc

Upvotes: 0

Yes Barry
Yes Barry

Reputation: 9876

When using Font Awesome Pro in CSS in, say, a psuedo-class or whatever, the solid icon is achieved through font-weight: bold specifically:

.something:after {
    content: '\f04b';
    font-family: "Font Awesome 6 Pro", sans-serif;
    font-weight: bold; // <-- THIS
}

Upvotes: 1

Related Questions