How to add icons in the button in HTML ?
Last Updated :
17 Sep, 2024
Adding icons in buttons in HTML involves including visual symbols or images within buttons to enhance their appearance and usability. This can be done using icon libraries like Font Awesome, Bootstrap Icons, or Material Icons, or by inserting images directly with <img> tags for visual cues.
Adding Icons to Buttons in HTML
Adding icons to buttons in HTML enhances visual appeal and usability by embedding symbols within buttons. This is done using icon libraries like Font Awesome or by inserting images, helping users quickly identify button functions for a more intuitive interface.
CDN Link for Font Awesome:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Approach
- Add the CSS File: Include the CSS file for the Font Awesome library in your HTML file using a <link> tag in the
<head> section. - Identify the Icon Class: Find the class for the specific icon you want to use. For Font Awesome, the classes typically start with fa followed by the icon name.
- Add the Icon Class to the Button: Add the identified icon class to your button's HTML code using the
class attribute. - Combine Classes for Styling: Incorporate the icon class within your button's HTML code, creating a combined class for styling and adding the desired icon.
1. Using font libraries
Using font libraries like Font Awesome, Bootstrap Icons, or Material Icons allows you to add scalable vector icons to buttons and other elements. These libraries offer a wide range of customizable icons that can be styled with CSS, enhancing web design and functionality.
Example 1: In this example we demonstrates adding icons to buttons using Font Awesome. Each button includes an icon (home, menu, trash, etc.), with hover effects and basic styling for background color and padding.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Add icon library -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
h1 {
color: green;
}
.btn {
background-color: light-green;
padding: 12px 16px;
font-size: 16px;
}
.btn:hover {
background-color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>How to add icons in the button in HTML?</h2>
<p>Icon buttons with text:</p>
<button class="btn"><i class="fa fa-home"></i> Home</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-trash"></i> Trash</button>
<button class="btn"><i class="fa fa-close"></i> Close</button>
<button class="btn"><i class="fa fa-folder"></i> Folder</button>
</center>
</body>
</html>
Output:
How to add icons in the button in HTML?
Example 2: Adding Multiple Icons to Buttons
In this example we demonstrates adding icons to buttons using Font Awesome. It includes icons such as bolt, fire, tree, and trash within buttons styled with basic CSS for background color and hover effects.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Add icon library -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
h1 {
color: green;
}
.btn {
background-color: light-green;
padding: 12px 16px;
font-size: 16px;
}
.btn:hover {
background-color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>
How to add icons in the button in HTML?
</h2>
<button class="btn">
<i class="fa fa-bolt"></i>
</button>
<button class="btn">
<i class="fa fa-fire"></i>
</button>
<button class="btn">
<i class="fa fa-tree"></i>
</button>
<button class="btn">
<i class="fa fa-trash"></i>
</button>
</center>
</body>
</html>
Output:
OutputAdding icons to buttons using Font Awesome significantly improves the visual appeal and functionality of your web pages. By simply including the Font Awesome CSS file and using appropriate classes, you can enhance user experience and engagement. Icons help users quickly identify the purpose of buttons, leading to a more intuitive and user-friendly interface.
How to add icons in the button in HTML ?
Similar Reads
How to Add Button in HTML? Buttons in HTML are interactive elements that users can click to trigger certain actions, such as submitting forms, navigating to different pages, or executing JavaScript functions. We can use either the <button> tag or <input type="button"> tag to create a button.1. Using <button>
1 min read
How to Add Icons in HTML? Icons in HTML are small images that show actions or items on a website, like a "home" button or a "search" symbol. They help people find things easily. To add icons in HTML, you can use an icon library like Font Awesome, Bootstrap Icons, Google Icons, and Image Icons. Icons1. Using Font Awesome Icon
2 min read
How to Add Button Inside an Input Field in HTML ? Integrating a button inside an input box is a common design pattern in web development, often seen in search bars, where a “search†button sits within the text input field, or in password fields that include a “show/hide†toggle. This UI element enhances user experience by offering a clear, interact
3 min read
How to add Icons to Buttons in Bootstrap 5 ? Adding Icons to the buttons enhances the overall look of the web page. Buttons are the components provided to create various buttons. Bootstrap 5 includes several predefined button styles, each serving its purpose. We can add icons to the buttons in several ways including Font Awesome Icons and Icon
2 min read
How to Use Images as Buttons in HTML? Images can work like buttons to make a website more interactive and visually appealing. Over 70% of modern websites include image-based elements to enhance user experience. This article shows different ways to turn images into clickable buttons using simple HTML.1. Using the img Tag Inside the Butto
2 min read
How to create mini button and icon position in the page ? In this article, we will see how to create a mini button and icon position on the page in jQuery. Here, we will create a simple working button that will perform a specific task when we click the button. For instance, when clicking the button, a popup message will show on the display screen & wit
5 min read