Aligning icons in css and html

Building responsive navigation icons for websites is a challenging task. Working on an admin panel, you must design and develop a vertical menu with sub-categories. All the icons in the icon libraries should follow some of the properties of the CSS (size, color, position, etc.)

Our Sidebar navigation can make your application easier by providing a simple template. 2 main elements write the HTML structure: 

• A header (tag) element 
• A main (tag) element

A header (tag) element Contains the website logo, the search form, and the navigation trigger. 

A main (tag) element containing the page's main content and the sidebar navigation. At the same time, the CSS code contains many features for alignment. The sidebar will take the full-screen height(100%), and the width is 180px—the position of the sidebar relative to the browser sidebar. The sidebar elements appear on top of the other element. The top margin is fixed at 0px. The left margin sets the sidebar off the screen. The padding will be 15px. The text-decoration is none, so this stops the underline of link elements. Set the font size of sidebar links to 20px. .sidebar hover left is declared as 0, so On mouse over the sidebar should appear on the screen. 

Here is an example of how to align the icons in CSS and HTML: