Skip to content
Related Articles

Related Articles

Blaze UI Input Icons

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 16 May, 2022

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!