Html 将带有输入组类的可单击图标添加到文本框

在Bootstrap中的

输入组的帮助下，我创建了一个文本框和一个提交按钮：

<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">
            Search
        </button>
    </span>
</div>
</div>


搜寻

我想在可点击的文本框中添加一个地理位置图标，我尝试了很多事情，比如用
输入组插件添加另一个span，但这是创建一个按钮类型的东西。我希望图标位于文本框内，并使其可点击。有人能建议一种方法吗？
添加一个
锚定
将其设置为一类
字形图标
，然后使其
位置：绝对
如下所示：


<div class="input-group input-group-lg col-lg-6 col-centered">
    <a href="#" onclick="alert('clicked');" class="glyphicon glyphicon-map-marker"></a>
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">
            Search
        </button>
    </span>
</div>

。输入组缩写{
字体大小：23px；
位置：绝对位置；
右：16%；
顶部：6px；
z指数：500；
}
在这里输入代码
搜寻
Anirudh，您好，您可能可以尝试这样的而不使用所有额外的css



搜寻


我的客户想要一个搜索框，在右边有一个可点击的搜索图标，搜索框在窗口中央，搜索框比普通的（
input group lg
）大，并且具有响应视图。在看到安格拉尔的回答之前，我一直是个可怜虫。：-）
 像这样？
.glyphicon-map-marker{
    position:absolute;
    z-index:1000;
    top:30%;
    left:2%;
}
a.glyphicon-map-marker
{
     text-decoration: none !important;
}

.input-group abbr{
    font-size: 23px;

    position: absolute;
    right: 16%;
    top: 6px;
    z-index: 500;
}

<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
    <input type="text" class="form-control">enter code here
    <abbr><a href="#"><i class="fa fa-map-marker"></i></a></abbr>

    <span class="input-group-btn">
        <button type="button" class="btn btn-default">
            Search
        </button>
    </span>
</div>
</div>

<div class="row">
    <div class="col-sm-2 col-md-2 col-lg-2"></div>

    <form ng-submit="search(searchterm)">
      <div class="form-group">
        <div class="input-group input-group-lg col-sm-8 col-md-8 col-lg-8 col-centered">
          <input type="text" class="form-control" ng-model="searchterm">
          <span class="input-group-btn">
            <button type="submit" class="btn btn-default">
              <span class="glyphicon glyphicon-search"></span>
            </button>
          </span>
        </div>
      </div>
    </form>

    <div class="col-sm-2 col-md-2 col-lg-2"></div>
  </div> <!-- end row -->