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 single introduction

Franco A. 200

@franco-a


Design comparison


SolutionDesign

Solution retrospective


Hey! First time using font awesome so I'd like some feedback if I used it correctly. The background svg was annoying to set up and I'm not sure how to align it perfectly like in the design, if anyone knows then I'd highly appreciate it if you could share your knowledge!

Community feedback

P
tediko 6,680

@tediko

Posted

Hello, Franco A! 👋

Congrats on finishing another challenge! Your solution responds well and looks good. In addition to Matt feedback i would suggest you to take a look at IcoMoon. I am using this myself for icons and it is good tool. IcoMoon provides many free icon packs (fontawesome included) and you can pick only that icons that you're interested in. You can also import your own icons (we've icons in design files) and then use them. Read about IcoMoon. Watch how to use them in your project.

Good luck with that, have fun coding! 💪

1

Franco A. 200

@franco-a

Posted

Hey @tediko , thanks for the feedback, I'll be looking in to that!

0
T
Matt Studdert 13,611

@mattstuddert

Posted

Hey Franco, nice work on this project! Your use of Font Awesome is fine, but your implementation currently means that the social icons are inaccessible to screen reader software. Anchor tags need to either have text inside them or an aria-label attribute on them to be able to be read by screen readers software. For social icons like this, I use aria-label. This would mean your anchor tags would look like this:

<a href="https://www.facebook.com" target="_blank" aria-label="Follow us on Facebook"><i class="fab fa-facebook-f"></i></a>

You also don't need the div inside the anchor tag. Just style the anchor tag directly. I'd also add the company name inside the alt attribute of the logo. This makes the logo accessible to screen reader users.

I hope that helps. Keep up the great work!

1

Franco A. 200

@franco-a

Posted

Hey @mattstuddert , thanks for the feedback. I was wondering how to make the social links accessible so this really helped. Thanks for creating this great site btw!

0
T
Matt Studdert 13,611

@mattstuddert

Posted

@franco-a, you're welcome! Glad I could help, and I'm happy you're enjoying the site! 🙂

1

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