How to add Font Awesome icon on the left of input group in Bootstrap-vue or Bootstrap 4?
14,021
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;
}
Author by
quanpham0805
Updated on June 07, 2022Comments
-
quanpham0805 almost 2 years
I've tried to search for the way to insert the
Font Awesome icon
to the input group forBootstrap-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.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; }