Skip to content
Related Articles

Related Articles

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 ?

Improve Article
Save Article
Like Article
  • Last Updated : 13 Jan, 2022

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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!