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

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