Accessible Icons in Navbars
- Fork this CodePen
- Use Font Awesome (or another web icon set like Iconic) to create a navbar made with one or more icons.
Note: Font Awesome installed for you under Settings
- Adjust the icons for accessibility using text labels, sr-only classes, etc.
Styling tips from Erika
- Read the Docs for Font Awesome to save yourself some effort.
For example, classes to resize the icons come with the CSS - no need to reinvent the wheel.
- Don't forget to create a roll-over effect on hover as the icons are serving as links in our challenge today.
Share your answer on Substack