输入内引导程序 4 中的图标

Question

我正在寻找一种在 bootstrap 4 中创建和输入这样的解决方案

我正在使用很棒的字体，这是我使用的代码

<div class="input-group">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <span>
        <i class="fa fa-user-circle-o" aria-hidden="true"></i>
    </span>
</div>

但我从输入中得到图像任何帮助请 https://jsfiddle.net/5db2ho62/

原文由 Mohamed Sherif Noureldin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不需要在输入中包含图标 - 您可以将其放在输入字段旁边，并使用 CSS 删除输入字段的边框。

HTML：

 <div class="input-group">
<i class="fa fa-user-circle-o"></i>
<input type="text" class="form-control" placeholder="Enter Name Here" >
</div>

CSS：

 input{
  border:none;
  background-color: transparent;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.fa-user-circle-o{
  color: gray;
}

更新小提琴： https ://jsfiddle.net/5db2ho62/2/

原文由 Shtut 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是解决方案

 span{
  position: absolute;
  margin-left: 5px;
  height: 25px;
  display: flex;
  align-items: center;
}
input{
  padding-left: 25px;
  height: 20px;
}

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

<div class="input-group">
  <span>
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
  </span>
  <input type="text" class="form-control" placeholder="Username" />
</div>

这是工作 小提琴

原文由 Syam Pillai 发布，翻译遵循 CC BY-SA 3.0 许可协议