Create an Icon Bar using HTML and CSS Last Updated : 29 Nov, 2023 Comments Improve Suggest changes Like Article Like Report This article provides a complete idea of how to create an Icon Bar using HTML and CSS. HTML is used to design the structure, and CSS applies styles to the elements to make the user interface (UI) attractive. To add the Icons, we use the Font Awesome icons CDN link in the head section, and add the icons code in body section. Example 1: Here, we create a Horizontal icon bar. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <title>Icon Bar using HTML and CSS</title> <style> .icon-bar { background-color: #4b8b01; overflow: hidden; } .icon-bar a { float: left; display: block; color: white; text-align: center; padding: 20px 35px; text-decoration: none; font-size: 30px; } .icon-bar a:hover { background-color: #2a93d5; } </style> </head> <body> <div class="icon-bar"> <a href="#"><i class="fa fa-home"></i></a> <a href="#"><i class="fa fa-search"></i></a> <a href="#"><i class="fa fa-envelope"></i></a> <a href="#"><i class="fa fa-globe"></i></a> <a href="#"><i class="fa fa-cog"></i></a> <a href="#"><i class="fa fa-user"></i></a> </div> </body> </html> Output: Example 2: Here, we create Vertical Icons Bar. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <title>Vertical Icon Bar using HTML and CSS</title> <style> .icon-bar { background-color: #4b8b01; overflow: hidden; height: 100vh; width: 80px; } .icon-bar a { display: block; color: white; text-align: center; padding: 20px 30px; text-decoration: none; font-size: 30px; } .icon-bar a:hover { background-color: #2a93d5; } </style> </head> <body> <div class="icon-bar"> <a href="#"><i class="fas fa-home"></i></a> <a href="#"><i class="fas fa-search"></i></a> <a href="#"><i class="fas fa-envelope"></i></a> <a href="#"><i class="fas fa-globe"></i></a> <a href="#"><i class="fas fa-cog"></i></a> <a href="#"><i class="fas fa-user"></i></a> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article Create an Icon Bar using HTML and CSS V vkash8574 Follow Improve Article Tags : Web Technologies Geeks Premier League Web Templates Web Tech - Advanced Geeks Premier League 2023 +1 More Similar Reads How to Create Badges using HTML and CSS ? This article will show you how to create a badge using HTML and CSS. Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that 2 min read Create a Sticky Social Media Bar using HTML and CSS Build a Sticky Social Media Bar with HTML and CSS, integrating Font Awesome icons for stylish and functional social links. Utilize CSS positioning to ensure the bar stays visible while users scroll, enhancing website engagement and accessibility.ApproachCreate a basic site structure of an HTML file 3 min read Create a Circular Progress Bar using HTML and CSS A circular progress bar is a visual representation that shows the progress of a task or operation in a circular form. It's a straightforward and useful way to represent progress and can enhance the appearance of your application or website. So, we will design a circular progress bar using HTML and C 3 min read How to Create Avatar Images using HTML and CSS ? This article will show you how to create an Avatar Image with the help of HTML and CSS. An Avatar is a visual representation of a user, often used in user profiles or comment sections on websites. Here, we have created a GFG logo avatar image. This avatar has 100px width and height, and border-radiu 1 min read How to Create an Image Overlay Icon using HTML and CSS ? Image overlay Icon can be an impressive addition to interactive detail or a set of features for your website. This article content will divide the task into two sections, the first section creating the structure and attach the link for the icon. In the second section, we will design the structure us 3 min read Like