MenusLesson 22Free preview

Sidebar with Icons

This lesson is part of How To · All levels

Summary

This lesson reviews the making of sidebars with icons. The design features a slender vertical navigation bar where each menu item is represented by a symbolic icon on the left side followed by a text label.

Key points

Combine font icons (FontAwesome) with text labels within vertical links
Apply a display: block on each item to be arranged downward
Icons can be given a pattern and width of uniform using the fa-fw class
Can be configured in a mini sidebar mode that only displays icons

Full lesson

Code examples and quizzes

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