Icons
- src
- forms
- icons.scss
Class list
- .icons
- .icons.on-left
- .icons.on-right
- .icons.on-both
- .icons .icon-left
- .icons .icon-right
Note that the following examples use the Font Awesome Icon Library.
Description
An .icons wraps around a .textbox and allows icons to be placed inside of the control. Use the desired on- class on the .icons to specify which sides will have icons.
Use the appropriate .icon-left or .icon-right depending on which sides you've specified should have icons.
<div class="icons on-left mb-half">
<input type="number" class="textbox" placeholder="balance">
<span class="icon-left">
<i class="fa fa-dollar fa-fw"></i>
</span>
</div>
<div class="icons on-right mb-half">
<input type="number" class="textbox" placeholder="balance">
<span class="icon-right">
<i class="fa fa-bank fa-fw"></i>
</span>
</div>
<div class="icons on-both mb-2">
<input type="number" class="textbox" placeholder="balance">
<span class="icon-left">
<i class="fa fa-dollar fa-fw"></i>
</span>
<span class="icon-right">
<i class="fa fa-bank fa-fw"></i>
</span>
</div>The .icon-left and .icon-right must come after the .textbox for the focus state styling to work.
Font size scaling
Use the font-size utility classes on the .icons to scale the elements within.
<div class="icons on-both h6 mb-2">
<input type="number" class="textbox" placeholder="balance">
<span class="icon-left">
<i class="fa fa-dollar fa-fw"></i>
</span>
<span class="icon-right">
<i class="fa fa-bank fa-fw"></i>
</span>
</div>
<div class="icons on-both h3 mb-2">
<input type="number" class="textbox" placeholder="balance">
<span class="icon-left">
<i class="fa fa-dollar fa-fw"></i>
</span>
<span class="icon-right">
<i class="fa fa-bank fa-fw"></i>
</span>
</div>
<div class="icons on-both h1 mb-2">
<input type="number" class="textbox" placeholder="balance">
<span class="icon-left">
<i class="fa fa-dollar fa-fw"></i>
</span>
<span class="icon-right">
<i class="fa fa-bank fa-fw"></i>
</span>
</div>