Open In App

Blaze UI Input Icons

Improve
Improve
Like Article
Like
Save
Share
Report

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



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