I have been searching for a way to add the Font Awesome icon to the input group in Bootstrap-vue, but I couldn't find any helpful information. Most tutorials are for Bootstrap 3 and when I tried a solution from this link, it didn't work for me.
My current setup: https://i.sstatic.net/0oWa8.png
It should resemble this (only the icon, not the entire style): https://i.sstatic.net/1knN4.png
Here's 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>
Current CSS styles applied:
.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;
}