MenusLesson 13Free preview

Navbar with Icons

This lesson is part of How To · All levels

Summary

This lesson reviews the addition of visual icons to the text on the Navbar with Icons. Combining graphical icons with text labels speeds up menu identification by users and improves the overall aesthetics of the interface.

Key points

Embed icon elements (such as the <i> FontAwesome or SVG tag) within the <a> link tag
Adjust the right margin on the icon so it doesn't stick close to the label text
Supports adaptive icons that change color while hover
Improve visual accessibility for users who read fast

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.