如何在 Bootstrap-vue 或 Bootstrap 4 中的输入组左侧添加 Font Awesome 图标？

Question

我试图搜索将 Font Awesome icon 插入 Bootstrap-vue 的输入组的方法，但没有出现。我尝试搜索 Bootstrap 4，但大多数教程都是针对 Bootstrap 3 的。我已经尝试过，但它对我不起作用。

我现在拥有的：

它应该是这样的（只有图标，不是整个样式）：

我的HTML:

<b-card no-body class="UniqueFullWidth">
  <b-tabs card>
    <b-tab title="Sign up" style="width:auto">
      <br>
      <b-form-input size="lg" placeholder="Full name">
      </b-form-input>
      <br>
      <b-form-input size="lg" placeholder="Username">
      </b-form-input>
      <br>
      <b-form-input size="lg" type="password" placeholder="Password">
      </b-form-input>
      <br>
      <b-form-input size="lg" type="email" placeholder="Email">
      </b-form-input>
    </b-tab>
    <b-tab title="Log in" active>
    <br>
      <b-form-input size="lg" placeholder="Username">
      </b-form-input>
      <br>
      <b-form-input size="lg" type="password" placeholder="Password">
      </b-form-input>
    </b-tab>
  </b-tabs>
</b-card>

我现在的CSS：

.UniqueFullWidth .card-header {
  font-size: 1.3em;
}
.UniqueFullWidth {
  width: 400px;
  margin: auto;
}
.UniqueFullWidth .card-header-tabs {
  margin-right: -21px;
  margin-left: -21px;
  margin-top: -13px;
}
.UniqueFullWidth .nav-tabs .nav-link.active {
  color: #000;
}
.UniqueFullWidth .nav-link {
  color: #979faf;
}
.UniqueFullWidth .nav-link:hover {
  color: #62676d;
}
.UniqueFullWidth .nav-tabs .nav-item {
  margin-bottom: -1px;
  flex-grow: 1;
  text-align: center;
}

Answer 1

使用<b-input-group>和<b-input-group-prepend>

HTML:

<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>

CSS:

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

如何在 Bootstrap-vue 或 Bootstrap 4 中的输入组左侧添加 Font Awesome 图标？

How to add Font Awesome icon on the left of input group in Bootstrap-vue or Bootstrap 4?

html

css

bootstrap-4

bootstrap-vue