Spectre Forms Form icons
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" >w3wiki</ 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