css - 如何在我的输入文本框中放置fa fa图标？

This question already has answers here:

Search input with an icon Bootstrap

(6个答案)

3年前关闭。

我正在尝试将fa fa图标放在Angular 4元素的输入文本框中。我尝试了其他Stack Overflow答案，但它们对我不起作用。我使用的编码如下:

 <div class="form-group has-feedback">
<input class="form-control "  name="UserName"  type="text"   placeholder="username"><span class="fa fa-user form-control-feedback"></span>
 </div>
 <div class="form-group has-feedback">
 <input class="form-control "  name="PassWord"  type="password" placeholder="password"><span class="fa fa-lock form-control-feedback"></span>
 </div>

输出如下:

但我想在文本框中输入图标:

最佳答案

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group has-feedback">
<input style="position:relative;" class="form-control "  name="UserName"  type="text"   placeholder="username" >
<span style="position:absolute; right:8px;top:8px;" class="fa fa-user "></span>
 </div>
 <div class="form-group has-feedback">
 <input class="form-control " style="position:relative;"  name="PassWord"  type="password" placeholder="password"><span style="position:absolute; right:8px;top:60px;" class="fa fa-lock form-control-feedback"></span>
 </div>

关于css - 如何在我的输入文本框中放置fa fa图标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50151091/

上一篇：Ansible-从列表创建字典

下一篇：angularjs - GulpUglifyError : unable to minify JavaScript Caused by: SyntaxError: Unexpected token name «k», 预期 punc «;»

相关文章：

jquery - 如何隐藏已经被jquery隐藏的div的背景图片

html - 向右滚动的表格中的粘性标题

html - Ag 网格，防止表格缩放到全宽

angular - 找不到模块 'ngx-cookie-service'

html - 步进进度条在手机上是水平的

javascript - 根据所选元素更改下一个 div 的背景

PHP 文本区域追加

html - 如何在 Bootstrap 4 上让所有列的高度和边距相同？

javascript - 在文本区域中添加字形显示文本而不是字形

javascript - 如何让径向渐变从饼图的中心开始？