Spectre Forms Form icons

Last Updated : 10 Feb, 2022

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=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</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>