Open In App

Pure CSS Buttons Icons

Improve
Improve
Like Article
Like
Save
Share
Report

Buttons are one of the most common UI elements. They made it possible for users to interact with a system and take action by making selections. To make the buttons more user-friendly we can put icons on the buttons. Pure CSS does not ship with the icons, there are so many icon packages available that can be used in Pure CSS. In this article, we will use the font awesome icon. To include icons on a button, use an <i> element within a pure-button class in the button element.

Pure CSS Buttons icons Classes: There is no predefined class for icons, you can put the font awesome icon between button elements as we used to put in normal html

Font Awesome Icons: Font-awesome is a web icon library that gives you scalable vector icons that can be customized in terms of color, size, and in many more aspects.

  https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

Syntax:

<button class="pure-button">
    <i class="fa fa-iconname"></i>
    ...
</button>

Note: To know more about Pure CSS Icons and Pure CSS Buttons follow the linked articles.

Example:

HTML




<!DOCTYPE html>
<html>
<head>
    <!--Import Pure Css files-->
    <link rel="stylesheet"
          href=
          integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
          crossorigin="anonymous"/>
    <link rel="stylesheet" 
          href=
</head>
  
<body>
    <center>
    <h1 class="text-success">Geeksforgeeks</h1>
    <strong>Pure CSS Button Icons</strong>
    <br><br>
      
    <button class="pure-button 
                   pure-button-primary">
        <i class="fa fa-fire"></i>
        Fire Alarm
    </button>
    <button class="pure-button">
        <i class="fa fa-trash"></i>
        Trash</button>
    </center>
</body>
</html>    


Output:

Pure CSS Buttons icons



Last Updated : 31 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads