Streaming live at 10am (PST)

How to make Font Awesome Icons with Circle Border?

What is the best way to get a circle border around a font awesome icon? I see I can stack them using but is there a better CSS way in Webflow? I see a lot of templates use that effect.

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!

1 Like

I will try that. Thanks.