title: Icon font inside input text issue (when I write a big word, the text starts to appear behind my icon)
body: <p>I have an input text for search.</p>
  
  <p>Inside this input have an icon font that is the submit button.</p>
  
  <p>But I'm having a problem, if I write a text/word very big in my search input, the text when it comes closer to my button (icon font) it starts to get behind this button, as you can see in my image.</p>
  
  <p>Do you know how I can fix this?</p>
  
  <p><img src="https://i.stack.imgur.com/VQ8xP.png" alt="enter image description here"></p>
  
  <p>I have here my issue code:</p>
  
  <p><a href="http://jsfiddle.net/jcak/zb39cr5f/" rel="nofollow noreferrer">http://jsfiddle.net/jcak/zb39cr5f/</a></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;li id="search" &gt;
      &lt;form id="search" method="post" enctype="multipart/form-data"&gt;
          &lt;button type="submit" name="search"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;input name="s" type="text" size="40" placeholder="Search..." /&gt;
      &lt;/form&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>*{background:#ccc;}
  
  #search
  {
      float:right;
      list-style:none;
      height:20px; 
      bottom:2px;
  
  
  }
  
  
  #search button[type="submit"] 
  {
      background: none;
      cursor: pointer;
      height: 22px;
      position: absolute;
      top: 25px;
      right: 15px;
  
  }
  
  button[type="submit"]&gt;i:hover
  {     
      color: #fff;
  
  }   
  
  button[type="submit"]&gt;i
  {
      background:none;
      color:#fff;
      font-size:1.1em; 
  
  }
  
  
  #search input[type="text"] 
  {
      color:#fff;
      border: 0 none;
      font-size:14px;
      background: red;
      text-indent: 0;
      width:110px;
      margin-top: 12px;
      padding: 8px 15px 8px 35px;
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      border-radius: 15px;
  }
  </code></pre>