Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
How to add icons in the button in HTML ?
We can add icons on buttons in so many ways but we will try that in pure HTML.
We have to use external fonts links for the icons. Applying icons on the button makes the user easy to understand the functionality of that button.
Font Awesome icon in your form is an innovative idea, that will bring attention to your website. It is as simple as applying Font Awesome icon on any button. The <i> tag and <span> tag are used widely to add icons on the webpages. To add any icons on the web pages, it needs the font-awesome link inside the head section. The font-awesome icon can be placed by using the fa prefix before the icon’s name.
CDN Link:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
Example: In this example, we will take a form where the button is necessary. After that, we will place the font-awesome icon inside the button. We will use the CDN link to use the font-awesome icons. After the button, we will place our icon.
HTML
<!DOCTYPE html><html> <head> <!-- Add icon library --> <link rel="stylesheet" href= <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:
.png)
