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 =
< 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:
Reference: https://picturepan2.github.io/spectre/elements/forms.html#forms-icons
Share your thoughts in the comments
Please Login to comment...