twitter-bootstrap 如何将 Glyphicon 放入输入标签中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35696122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put a Glyphicon inside input tag?
提问by AzVoz
I'm trying put a glyphicon inside input tag html but it's incorrect.
我正在尝试在输入标签 html 中放置一个字形，但它不正确。
I mean
我是说
<= Image
<= 图像
Code
代码
<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 -->
采纳答案by Raviteja
Try this
试试这个
<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>
回答by Nikhil Nanjappa
Just replace this with your markup.
只需将其替换为您的标记即可。
<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>
It would look like this
它看起来像这样
and using CSS make the span's background color transparent, like so
并使用 CSS 使跨度的背景颜色透明，就像这样
#search-icon {
background-color: transparent;
}
#search-icon input {
border-left: 0;
}
Then finally it would look like this(what you want). You could add a placeholder too if you wish.
最后它看起来像这样（你想要什么）。如果您愿意，您也可以添加占位符。
回答by Antonios Thanasis
Try this:
试试这个：
<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=" Search">
<button class="searchButton" type="submit">Search</button>
</form>
</div>
</body>
And then add external CSS:
然后添加外部 CSS：
.placeicon {
font-family: fontawesome;
}
回答by Hitmands
you are probably looking for input-group-addon: http://getbootstrap.com/components/#input-groups-basic
您可能正在寻找input-group-addon：http: //getbootstrap.com/components/#input-groups-basic
Just a note: you can't put tags inside a
input. Have a look at: https://www.w3.org/TR/html4/index/elements.html
请注意：您不能将标签放入
input. 看看：https: //www.w3.org/TR/html4/index/elements.html
回答by Chonchol Mahmud
You can add below this way:
您可以通过这种方式在下面添加：
<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>
