title: How to add Font Awesome icon on the left of input group in Bootstrap-vue or Bootstrap 4?
body: <p>I've tried to search for the way to insert the <code>Font Awesome icon</code> to the input group for <code>Bootstrap-vue</code> but nothing appears. I tried to search for Bootstrap 4 but most tutorials are for Bootstrap 3. I've tried <a href="https://stackoverflow.com/questions/46992415/bootstrap-4-font-awesome-input-icons">this</a> but it doesn't work for me.</p>
  
  <p>What I have now: <a href="https://i.stack.imgur.com/0oWa8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0oWa8.png" alt="enter image description here"></a></p>
  
  <p>It should look like this (The icon only, not the whole style): <a href="https://i.stack.imgur.com/1knN4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1knN4.png" alt="enter image description here"></a></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;b-card no-body class="UniqueFullWidth"&gt;
    &lt;b-tabs card&gt;
      &lt;b-tab title="Sign up" style="width:auto"&gt;
        &lt;br&gt;
        &lt;b-form-input size="lg" placeholder="Full name"&gt;
        &lt;/b-form-input&gt;
        &lt;br&gt;
        &lt;b-form-input size="lg" placeholder="Username"&gt;
        &lt;/b-form-input&gt;
        &lt;br&gt;
        &lt;b-form-input size="lg" type="password" placeholder="Password"&gt;
        &lt;/b-form-input&gt;
        &lt;br&gt;
        &lt;b-form-input size="lg" type="email" placeholder="Email"&gt;
        &lt;/b-form-input&gt;
      &lt;/b-tab&gt;
      &lt;b-tab title="Log in" active&gt;
      &lt;br&gt;
        &lt;b-form-input size="lg" placeholder="Username"&gt;
        &lt;/b-form-input&gt;
        &lt;br&gt;
        &lt;b-form-input size="lg" type="password" placeholder="Password"&gt;
        &lt;/b-form-input&gt;
      &lt;/b-tab&gt;
    &lt;/b-tabs&gt;
  &lt;/b-card&gt;
  </code></pre>
  
  <p>My current CSS:</p>
  
  <pre><code>.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;
  }  
  </code></pre>