title: How to add an icon in a search box
body: <p>Questions to cover:<br>
  How to add an icon in a search box / form<br>
  How to add an icon in an input field</p>
  <p>I had the following issue whereby I could't get the FontAwesome fa-search icon to sit to the right of the input field / search box.</p>
  <p>Here is an image of the form:<br>
  <a href="https://i.stack.imgur.com/4RFyI.jpg" rel="nofollow noreferrer">A HTML search form on a website's header</a></p>
  <p>Link to the form here (not evergreen):<br>
  <a href="https://www.themirrorman.co" rel="nofollow noreferrer">https://www.themirrorman.co</a></p>
  <p>Here is my original code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media screen and (min-width: 800px) {
    #header-search-desktop-div {
        position: absolute;
        left: 180px;
        width: 450px;
        margin-top: 0;
        margin-bottom: 0;
        border: 1px solid #881d98;
        border-radius: 24px;
    }
    #header-search-desktop-div #header-search-fa {
        position: absolute;
        color: #7E7E7E;
        z-index: 100;
        font-size: 27px;
    }
    #header-search-desktop-div .fa-search {
        top: 5%;
        left: 1.5%;
        line-height: 0.8em;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header-search-desktop-div"&gt;
      &lt;form role="search" method="get" class="searchform" action="https://themirrorman.co/"&gt;
              &lt;span id="header-search-fa" class="fa fa-search"&gt;
                  &lt;input id="header-search-desktop-input" name="product-search" type="text" value="" placeholder="Product Search…"&gt;
                  &lt;input type="hidden" name="post_type" value="product" /&gt;
              &lt;/span&gt;
      &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The following code I received answers on and changed, it now works like in the above image link:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#header-search-submit {
  position: absolute;
  z-index: 1;
  padding: 0;
  right: 15px;
  top: 6px;
  font-size: 24px;
  font-family: FontAwesome;
  color: #7B7B7B;
  cursor: pointer;
  background: 0;
  border: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header-search-desktop-div"&gt;
  &lt;form id="header-search-form" role="search" action="https://themirrorman.co/" method="get"&gt;
  &lt;fieldset&gt;
      &lt;span class="text"&gt;
          &lt;input id="header-search-desktop-span" style="border-radius: 24px;" type="text" value="" name="s" class="s" placeholder="I am looking for..." /&gt;
          &lt;input id="header-search-submit" type="submit" value="&amp;#xf002;" name="post_type" /&gt;
      &lt;/span&gt;
  &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>