---
title: Form icon
---

<div id="form-icon-left" class="mb-large">
  <h4><a href="#form-icon-left">#form-icon-left</a></h4>
  <div class="fm fm-text fm-ico-left fm-small mb-small">
    <input type="text" placeholder="Form text with an icon on the left">
    <i class="ico ico-cross"></i>
  </div>
  <div class="fm fm-text fm-ico-left mb-small">
    <input type="text" placeholder="Form text with an icon on the left">
    <i class="ico ico-cross"></i>
  </div>
  <div class="fm fm-text fm-ico-left fm-large">
    <input type="text" placeholder="Form text with an icon on the left">
    <i class="ico ico-cross"></i>
  </div>
</div>



<div id="form-icon-right">
  <h4><a href="#form-icon-right">#form-icon-right</a></h4>
  <div class="fm fm-select fm-ico-right fm-small mb-small">
    <select placeholder="Form select with an icon on the right">
      <option>Hello!</option>
      <option>Goodbye!</option>
    </select>
    <i class="ico material-icons">face</i>
  </div>
  <div class="fm fm-select fm-ico-right mb-small">
    <select placeholder="Form select with an icon on the right">
      <option>Hello!</option>
      <option>Goodbye!</option>
    </select>
    <i class="ico material-icons">face</i>
  </div>
  <div class="fm fm-select fm-ico-right fm-large">
    <select placeholder="Form select with an icon on the right">
      <option>Hello!</option>
      <option>Goodbye!</option>
    </select>
    <i class="ico material-icons">face</i>
  </div>
</div>