Cirrus

#Form Glyphs

To add greater context, glyphs can be used inside forms themselves.

#Basics

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>

#Sizes

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--xs" 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--sm" 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--lg" 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--xl" 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>