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:
<!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