#Form Glyphs
To add greater context, glyphs can be used inside forms themselves.
To add greater context, glyphs can be used inside forms themselves.
To include glyphs inside your input
, just add the input-contains-icon
to the input
control. The glyph itself will be at the same level as the input and wrapped within a span
with the icon
class. By default, the glyphs will appear on the left side.
<div class="input-control">
<input type="email" class="input-contains-icon" placeholder="Email" /><span class="icon"><i class="fa fa-wrapper fa-envelope"></i></span>
</div>
<div class="input-control">
<input type="password" class="input-contains-icon" placeholder="Password" /><span class="icon"><i class="fa fa-wrapper fa-lock"></i></span>
</div>
To set it to the right, use the input-contains-icon-right
class and the icon-right
class on the icon. There exists a input-contains-icon-left
class, but that accomplishes the same thing as the version of the class above.
<div class="input-control">
<input type="password" class="input-contains-icon-right" placeholder="Password" />
<span class="icon icon-right"><i class="fa fa-wrapper fa-chevron-right" aria-hidden="true"></i></span>
</div>
The glyphs embedded in the input
fields will automatically size themselves to fit the parent.
<div class="input-control">
<input type="email" class="input-contains-icon input-contains-icon-right input-xsmall" placeholder="Extra Small"/>
<span class="icon"><i class="fa fa-wrapper fa-envelope"></i></span>
<span class="icon icon-right"><i class="fa fa-wrapper fa-chevron-right" aria-hidden="true"></i></span>
</div>
<div class="input-control">
<input type="email" class="input-contains-icon input-contains-icon-right input-small" placeholder="Small"/>
<span class="icon"><i class="fa fa-wrapper fa-envelope"></i></span>
<span class="icon icon-right"><i class="fa fa-wrapper fa-chevron-right" aria-hidden="true"></i></span>
</div>
<div class="input-control">
<input type="email" class="input-contains-icon input-contains-icon-right" placeholder="Normal"/>
<span class="icon"><i class="fa fa-wrapper fa-envelope"></i></span>
<span class="icon icon-right"><i class="fa fa-wrapper fa-chevron-right" aria-hidden="true"></i></span>
</div>
<div class="input-control">
<input type="email" class="input-contains-icon input-contains-icon-right input-large" placeholder="Large"/>
<span class="icon"><i class="fa fa-wrapper fa-envelope"></i></span>
<span class="icon icon-right"><i class="fa fa-wrapper fa-chevron-right" aria-hidden="true"></i></span>
</div>
<div class="input-control">
<input type="email" class="input-contains-icon input-contains-icon-right input-xlarge" placeholder="Extra Large"/>
<span class="icon"><i class="fa fa-wrapper fa-envelope"></i></span>
<span class="icon icon-right"><i class="fa fa-wrapper fa-chevron-right" aria-hidden="true"></i></span>
</div>