Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add icons in the button in HTML?
Introduction
In this article, we will show you how to add icons to your buttons in HTML. Icons are a great way to add visual appeal and enhance the usability of your buttons. They can be used to indicate the type of action a button will perform or make it easier for users to understand the function of a button.
Approaches
There are several ways to add icons to buttons in HTML, and in this article, we will cover two of the most popular methods −
Using font libraries
Using image files.
Approach 1: Using Font Libraries
One way to add icons to your buttons in HTML is by using a font library. Font libraries are collections of scalable vector icons that can be easily customized and styled using CSS. The most popular font libraries are Font Awesome and Ionicons.
Step 1 − Include the CSS file for the font library in your HTML file.
Example
Here’s an example to demonstrate the same −
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/5.15.3/css/all.min.css">
<style>
button {
padding: 10px;
font-size: 1em;
}
</style>
</head>
Step 2 − Use the appropriate class for the icon you want to use. For example, in Font Awesome, you would use the class "fa fa-icon-name" to add an icon.
Here, we are adding the right arrow icon −
<i class="fa fa-arrow-right"></i>
Step 3 − Add the class to your button's HTML code.
<button> <i class="fa fa-arrow-right"></i> Next </button>
Step 4 − The complete code is given below (index.html file) −
Example
Here’s an example to demonstrate the same −
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/5.15.3/css/all.min.css">
<style>
button {
padding: 10px;
font-size: 1em;
}
</style>
</head>
<body>
<h1> Welcome to tutorials point</h1>
<button>
<i class="fa fa-arrow-right"></i> Next
</button>
</body>
</html>
The above code uses the Font Awesome library for adding icons to the button. The first step is to include the CSS file for the font library in the HTML file. In this example, we use the CDN link for Font Awesome. Next, we use the appropriate class for the icon we want to use, in this case "fa fa-arrow-right" for the right arrow icon. We then add this class to our button's HTML code, which is wrapped inside an <i> tag. This will display the right arrow icon inside the button.
Approach 2: Using Image Files
Another way to add icons to your buttons in HTML is by using image files. This approach is useful if you want to use a custom icon or if the icon you want to use is not available in a font library.
Example
Here’s an example to demonstrate the same −
Step 1 − Create or download the image file of the icon you want to use.
Here, we are using a free icon website to download an icon.
Step 2 − Add the image file to your project's directory by navigating and dragging and dropping in file explorer.
Step 3 − Add the html button element where you want to add the icon.
<button class="icon-button"> Next </button>
Step 4 − Use the "background-image" property in your button's CSS to set the icon as the background image.
.icon-button {
background-image: url(icon.png);
}
Step 5 − Add the appropriate CSS to position and size the icon.
.icon-button {
background-image: url(icon.png);
background-repeat: no-repeat;
background-position: center;
}
Step 6 − Here is the complete code to implement the same −
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/5.15.3/css/all.min.css">
<style>
.icon-button {
background-image: url(icon.png);
background-repeat: no-repeat;
background-position: center;
padding: 12px;
}
</style>
</head>
<body>
<h1>Welcome to Tutorials Point</h1>
<button class="icon-button">
<i class="fa fa-arrow-right"></i> Next
</button>
<button class="icon-button">
Next
</button>
</body>
</html>
In this example, the first button uses the Font Awesome library to display an arrow icon, and the second button uses an image file as the icon. You can adjust the size and position of the icon using the CSS properties, such as background-size and background-position.
Conclusion
In this article, we have shown you two different approaches for adding icons to your buttons in HTML. Using font libraries is a quick and easy way to add icons to your buttons and offers a wide range of options. On the other hand, using image files gives you more flexibility and allows you to use custom icons or icons that are not available in font libraries. Regardless of which approach you choose, adding icons to your buttons can greatly enhance the visual appeal and usability of your webpage.
13K+ Views
