如何在Bootstrap 4或Bootstrap-vue中突出显示前置的Font Awesome图标

Question

我有这样的东西：

如何扩大边框的宽度，使其也覆盖左侧的图标，如下所示：

我的HTML：

.input-group-text {
  width: 48px;
  border-right: none;
  background-color: #ffffff;
}
[class^="fa-"], [class*=" fa-"] {
  display: inline-block;
  width: 100%;
}
.LoginInput {
  border-left: none;
  position: relative;
}

<b-input-group>
  <b-input-group-prepend>
    <span class="input-group-text"><i class="fa fa-user fa-lg"></i></span>
  </b-input-group-prepend>
  <b-form-input class="LoginInput" size="lg" placeholder="Username">
  </b-form-input>
</b-input-group>

<b-input-group>
  <b-input-group-prepend>
    <span class="input-group-text"><i class="fa fa-lock fa-lg"></i></span>
  </b-input-group-prepend>
    <b-form-input class="LoginInput" size="lg" type="password" placeholder="Password">
    </b-form-input>
</b-input-group>

Answer 1

我找到了詹姆斯·巴内特（James Barnett）的this working demo。他使用带有CSS的字体真棒图标来实现位置：绝对；在图标和文本上缩进以实现您要实现的目标。他将图标和输入字段放在容器div中。

HTML

<div class="search">
  <span class="fa fa-search"></span>
  <input placeholder="Search term">
</div>

CSS

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-    awesome.min.css");
  body { margin: 30px; }

.search {
  position: relative;
  color: #aaa;
  font-size: 16px;
 }

.search input {
  width: 250px;
  height: 32px;
  background: #fcfcfc;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}

.search input { text-indent: 32px;}
.search .fa-search { 
  position: absolute;
  top: 10px;
  left: 10px;
}

找到完整线程here.

我希望这会有所帮助。