PUBLISHED ON: AUGUST 7, 2021
How to create icon buttons with CSS?
The icon buttons are widely used in web pages. The buttons with icons are more visually appealing than the button with text. The famous icon button is the hamburger button. The icon button is popular among social media apps to like, follow, subscribe, and many more usages. We can create this icon button with CSS.
Creating an icon button
The easiest way to create an icon button is by adding the icons from the Font Awesome library. To do so create an <button> element and use any icon from the Font Awesome library by adding its external CSS link to the program.
Example: Creating an icon button Using Font Awesome library
In this example, we have created icon buttons. The icon button has been customized using CSS properties like background-color, padding and font-size.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.icon {
font-size: 30px;
color: white;
background-color: red;
padding: 8px 16px;
}
.icon:hover {
color: red;
background-color: white;
}
</style>
</head>
<body>
<h2> Icon Button </h2>
<button class="icon"><span class="fa fa-home"></span></button>
<button class="icon"><span class="fa fa-heart"></span></button>
<button class="icon"><span class="fa fa-thumbs-up"></span></button>
</body>
</html>
Output
Here is the output of the above code.
Example: An icon button with text
In this example, we have added text within the icon button.
Conclusion
In this tutorial, we have learned to create an icon button. We can do so using the external icon library. We have used the Font Awesome library to add icons to the button.
