Blaze UI Input Icons
Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.
In this article, we’ll see about Blaze UI Input Icons. Input Icons are used to add the icons with the input component. They are helpful in identifying the type of input we have to add.
Blaze UI Input Icons class:
- c-icon: This class is used to add an icon with the input component.
- o-field–icon-left: This class is used to add an icon on the left side with the input component.
- o-field–icon-right: This class is used to add an icon on the right side with the input component.
Syntax:
<div class="o-field o-field--icon-left"> <i class="far fa-calendar-alt c-icon"></i> <input class="c-field" type="text"> </div>
Example 1: Below example demonstrates the use of Blaze UI Input Icons.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= <script src= </script></head> <body> <div class="o-container o-container--medium"> <h1 style="color: green"> GeeksforGeeks </h1> <h3>Blaze UI Input Icons</h3> <div class="o-field o-field--icon-left"> <i class="fas fa-user c-icon"></i> <input class="c-field" type="text" placeholder="Enter username" /> </div> </div></body> </html> |
Output:
Blaze UI Input Icons
Example 2: Below is another example that demonstrates the use of Blaze UI Input Icons.
HTML
<!DOCTYPE html><html> <head> <link rel="stylesheet" href= <script src= </script></head> <body> <div class="o-container o-container--medium"> <h1 style="color: green"> GeeksforGeeks </h1> <h3>Blaze UI Input Icons</h3> <div class="o-field o-field--icon-left o-field--icon-right"> <i class="fa fa-envelope c-icon u-color-brand"></i> <input class="c-field c-field--success" type="text" placeholder="Enter email id"> <i class="fas fa-check c-icon u-color-green"></i> </div> </div></body> </html> |
Output:
Blaze UI Input Icons
Reference: https://www.blazeui.com/components/inputs
Please Login to comment...