Question

我尝试在输入标记html中添加一个glyphicon，但它不正确。

我的意思是

＆lt; =图片

代码

<input type="text" name="search" id="search_box pull-right"  class="form-control search_box" placeholder="Search for..."
                                   <span class="glyphicon glyphicon-search" ></span> 
                            /> <!-- end input -->

Answer 1

试试这个

<div class="col-sm-6">
  <div class="right-inner-addon">
    <i class="icon-search"></i>
    <input type="search" class="form-control" placeholder="Search" />
  </div>
</div>

LIVE DEMO

Other ways to show

Answer 2

您可能正在寻找input-group-addon：http://getbootstrap.com/components/#input-groups-basic

只需注释：您无法将标记放入input。看看：https://www.w3.org/TR/html4/index/elements.html

Answer 3

您可以通过以下方式添加：

  <div class="form-group col-xs-6">
    <label class="control-label">
      <code>.inner-addon.<i>left</i>-addon</code>
    </label>
    <div class="inner-addon left-addon">
      <i class="glyphicon glyphicon-user"></i>
      <input type="text" class="form-control" placeholder="Username" />
    </div>
  </div>

<强> WORKING DEMO

Answer 4

只需将其替换为您的标记。

<div class="input-group">
  <span class="input-group-addon" id="search-query"><span class="glyphicon glyphicon-search"></span></span>
  <input type="text" class="form-control" aria-describedby="search-query">
</div>

看起来像这样

并使用CSS使span的背景颜色透明，如此

#search-icon {
  background-color: transparent;
}

#search-icon input {
  border-left: 0;
}

然后最终看起来像这样（你想要的）。如果您愿意，也可以添加占位符。

Answer 5

尝试一下：

<head><link rel="stylesheet" type="text/css"
        href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></head>

<body>
    <div class="topnav">
        <form action="">
            <input type="text" class="placeicon" placeholder="&#xf002; Search">
            <button class="searchButton" type="submit">Search</button>
        </form>
    </div>
</body>

然后添加外部CSS：

 .placeicon {
      font-family: fontawesome;
  }

如何在输入标签内放置Glyphicon？

5 个答案: