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

Question

如何插入图标的span类并使图标用作搜索按钮。我正在使用单词按cms，我在word press中使用默认搜索。

这是我搜索的代码，我在其中创建了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>

它看起来像这样

我想制作这样的输出，并在wordpress IDE中考虑将图标span类作为搜索按钮。

Answer 1

试试这个：

<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>