Foundation 5 - input field with inline search icon on the right.

fonts.scss

// fonts from IcoMoon.io
// ..
// ..
// ..
.icon-search:before {
  content: "\e600";
}

search.html

<section id="footer-search">
  <h2>Search YOUR_WEB_SITE</h2>
  <form>
    <input class="search-bar" placeholder="Enter search terms" type="text">
    <div class="button-wrap">
      <button name="button" type="submit">
        <i class="icon-search"></i>
      </button>
    </div>
  </form>
</section>

search.scss

section#footer-search {
  h2 {
    color: white;
    font-size: 12px;
  }
  @include grid-row();
  @include grid-column($columns: 12, $collapse: true);
  form {
    input[type="text"] {
      @include grid-column($columns: 10, $collapse: true);
      @include side-radius($side: right, $radius: 0);
      @include side-radius($side: left, $radius: 4px);
      padding-left: rem-calc(10px);
      border: none;
    }
    .button-wrap {
      @include grid-column($columns: 1, $collapse: true);
      button {
        @include prefix-postfix-base();
        @include postfix();
        @include side-radius($side: right, $radius: 4px);
        // Reduce default button size (via padding)
        padding-left: rem-calc(15px);
        border: none;
        background: white;
        i {color: gray;}
      }
    }
  }
}