Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Huddle Landing Page HTML, CSS, Bootstrap 5

Kristine 310

@sn-tin


Design comparison


SolutionDesign

Solution retrospective


Hi! It took me hours to figure out how to put a circle border around each link. I used the updated version of fontawesome for the icons but when I tried to put a border around it, the icons don't go to the center of the border. So I ended up using fa-stack of fontawesome that's why the borders are thick. Is there any way to change the thickness of the circle from fontawesome? Or, I would appreciate it if you could give me tips on how I can adjust the icons to the center of the borders in CSS instead. Thank you.

Community feedback

Anjor Rao 115

@anjorrao

Posted

Hey @kristine, great job! I would suggest creating a square structure using height and width and applying a line-height property of equal value. Try this CSS to fa-circle class: border: 1px solid; height: 35px; width: 35px; border-radius: 50%; line-height: 35px;

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord