CODEWITHSUNDEEP
cssfont-awesome
christopheUS
christopheUS

Reputation: 43

CSS Content with a Font Awesome light icon

I have the following CSS code

content: "\f061";
color: #006697;
font-family: FontAwesome;

to add a right arrow after an element, but I'd like the arrow to be light not bold. Font-weight property doesn't work and I can NOT add HTMT like "i class="fal fa-arrow-right" in the content attribute.

Anyone knows how I can achieve this? Thanks

Edit: I found this method to reduce the weight of the stroke
-webkit-text-stroke: 2px #3EC5E6; But my issue is I m using a background with opacity and I have some issue with to match the colors because of the alpha

Edit2 I switched to an RGB color instead of RGBA and the above solution works great now

Upvotes: 1

Views: 5988

Answers (2)

Chris Wheeler
Chris Wheeler

Reputation: 1716

Not sure if something in FA5 Pro has changed in a recent version, but the accepted answer from Reza Saadati didn't work for me - I had to do this:

p:before{
    font-family:"Font Awesome 5 Pro";
    font-weight:300;
    content:"\f10d";
}

Upvotes: 2

Reza Saadati
Reza Saadati

Reputation: 5419

You probably use the classes fas and fa-arrow-right. Instead of fas use fal. But that's only for Font Awesome 5 Pro.

Edit:

Use font-family: "Font Awesome 5 Light", which is also available for Font Awesome 5 Pro.

Upvotes: 0

Related Questions