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

Question

I've tried to search for the way to insert the Font Awesome icon to the input group for Bootstrap-vue but nothing appears. I tried to search for Bootstrap 4 but most tutorials are for Bootstrap 3. I've tried this but it doesn't work for me.

What I have now:

It should look like this (The icon only, not the whole style):

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

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

Use <b-input-group> and <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;
}