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:
<!DOCTYPE html>
<html>
<head>
<title>SPECTRE CSS Forms Class</title>
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css@0.5.9/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>
Output:
Reference: https://picturepan2.github.io/spectre/elements/forms.html#forms-icons