MenusLesson 2Free preview

Icon Bar

This lesson is part of How To · All levels

Summary

This lesson reviews how to create an icon bar using HTML and CSS. The Bar Icon presents a concise list of horizontal or vertical navigation icons, often used as a shortcut menu on the side of a web application or a menu dock on a mobile device.

Key points

The Bar icon can be set horizontally or vertically with a wide property and CSS layout
Using popular vector icon libraries such as FontAwesome or standalone SVG
The hover effect and the .active class mark the icon that the user is selecting
Apply CSS Flexbox or Float for precise proportional layout

Full lesson

Code examples and quizzes

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