将‘fa search`添加到文本框中

Question

更新代码：

添加建议的<span class="input-group-addon">.00</span>后，现在呈现的是以下内容：

​

​

我尝试使用style="margin-left:200px;"，但没有执行任何操作

更新结束

如何在文本框的右侧添加fa fa search？下面是我渲染代码后的html：

​

​

<div class="form-group">
    <label class="col-sm-2 control-label">Search </label>
    <div class="input-group" style="margin-left:210px">
        <span class="input-group-addon"><i class="fa fa-search"></i></span>
        <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
        <input class="form-control ui-autocomplete-input" data-jqui-acomp-delay="200" data-jqui-acomp-hiddenvalue="PartId" data-jqui-acomp-minlength="2" data-jqui-acomp-source="/Search" data-jqui-type="autocomplete" id="Part" name="Part" placeholder="Search..." required="required" style="width:215px !important;" type="text" value="" data-parsley-id="6454" autocomplete="off">
        <ul class="parsley-errors-list" id="parsley-id-6454"></ul>
        <input id="PartId" name="PartId" type="hidden" value="" data-parsley-id="9361">
        <ul class="parsley-errors-list" id="parsley-id-9361"></ul>

    </div>
</div>

如果我只是将span添加到文本框旁边，它将呈现以下内容：

<span class="input-group-addon"><i class="fa fa-search"></i></span>

​

​

Answer 1

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">
   <span class="fa fa-search"></span>
  </span>
</div>

Answer 2

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

在这里查看这段代码。http://getbootstrap.com/components/#input-groups

这应该可以实现您想要的功能，只需在$所在位置添加fa图标

此外，您应该尝试使用Gylphicons

http://getbootstrap.com/components/