在文本框中添加bootstrap span类图标

Question

How can i insert span class of the icon and make the icon serves as the search button. I am using a word press cms and i am using a default search in word press.

here is my code in search where i created search-form.php

<div class="col-xs-7 input-group">
<form role="search" method="get" action="<?php echo home_url( '/' ); ?>">
        <input type="search" class="form-control styletext" placeholder="Search" value="<?php echo get_search_query() ?>" name="s" title="Search" />
        <span class="input-group-addon">
           <i class="fa fa-chevron-right" aria-hidden="true"></i>
        </span>
</form>
</div>

and it looks like this

i want to make an output like this and make the icon span class serve as search button considering in wordpress IDE.

Answer 1

Try this:

<div class="col-xs-7">
  <form role="search" method="get" action="<?php echo home_url( '/' ); ?>">
    <div class="input-group">
      <input type="search" class="form-control styletext" placeholder="Search" value="<?php echo get_search_query() ?>" name="s" title="Search" /><span class="input-group-addon"><i class="fa fa-chevron-right" aria-hidden="true"></i></span>
    </div>
  </form>
</div>