Streaming live at 10am (PST)

How to make Font Awesome Icons with Circle Border?

#1

What is the best way to get a circle border around a font awesome icon? I see I can stack them using https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons but is there a better CSS way in Webflow? I see a lot of templates use that effect.

0 Likes

#2

Hey man!

Super easy to do this. Just drag in a div block in and set it’s width and height.

For example 50px height and 50px width. It will now be a box.

Down in the corner section make these 50px so it’s rounded

Add a white border and boom you have a circle.

Put your fontawesome icon inside that div and set it to flex centre.

Let me know if that doesnt work!

0 Likes

#3

I will try that. Thanks.

0 Likes