Jc John Jc John - 2 months ago 7
PHP Question

adding bootstrap span class icon in textbox

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
output

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

output

Answer

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>