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 Create a Curtain Menu using HTML and CSS This article will show you how to create a Curtain menu navbar effect with the help of HTML and CSS. The curtain menu means revealing or pulling down the menu items like a curtain. HTML is used to create the structure of the curtain menu and applies styles on that element to make like curtain menu e 3 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 How to create a Hero Image using HTML and CSS ? A Hero Image is a large image with text, often placed at the top of a webpage. Hero images can be designed using HTML and CSS. This article contains two sections. The first section attaches the image and designs the basic structure. The second section designs the images and texts on the images. The 2 min read How to create Vertical Navigation Bar using HTML and CSS ? After reading this article, you will be able to build your own vertical navigation bar. To follow this article you only need some basic understanding of HTML and CSS. Let us start writing our vertical navigation bar, first, we will write the structure of the navigation bar. In this tutorial, we crea 3 min read How to Create Browsers Window using HTML and CSS ? The browser window is a tool to view the pages from the internet. It is used to search the content on the internet and get relevant information from the internet. Creating Structure: In this section, we will create a basic site structure and also attach the CDN link of the Font-Awesome for the icons 3 min read How to Create Neon Light Button using HTML and CSS? The neon light button animation effect can be easily created by using HTML and CSS. By using HTML, we will design the basic structure of the button and then by using the CSS, we can create the neon light animation effect. HTML code: In this section, we will design a simple button structure using anc 2 min read Like