Open In App

Spectre Forms Form icons

Improve
Improve
Like Article
Like
Save
Share
Report

Spectre Forms Form icons is used to include icons in the form. In Spectre Forms component we have a icon.css to include icons in the form field. We can align them as we want left or right. We just need to add form-icon in the input field to include the desire icon.

 Forms Form icons Classes:

  • form-icon: This class is used to include the icons in the input filed.
  • has-icon-left: This class is used to place the icon on left side of the input field.
  • has-icon-right: This class is used to place the icon on right side of the input field.

Syntax:

To set the alignment of icon:

<div class="has-icon-right">
 ....
</div>

To set the desired icon:

<i class="form-icon icon ..></icon>

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>SPECTRE CSS Forms Class</title>
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
</head>
 
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE Forms Form icons Class</strong>
        <br>
    </center>
    <form>                   
        <label class="form-label">Email Id:</label>
          <div class="form-group has-icon-right">
              <input class="form-input "
                      type="text"
                      placeholder="Email Id"
                      value="mastermind@gmail.com">
               <i class="form-icon icon icon-check"></i>
          </div>
        <button class="btn btn-success">
            Download
            <i class="form-icon icon icon-download"></i>
        </button>
        <button class="btn btn-error">
               <i class="form-icon icon icon-shutdown"></i>
        </button>
    </form>
</body>
 
</html>


Output:

Spectre Forms Form icons

Reference: https://picturepan2.github.io/spectre/elements/forms.html#forms-icons



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