Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

font-awesome inside b-form-group labels.

See original GitHub issue

Hi, Has anyone been able to do:

  <b-form-group label='<i class="fas fa-envelope fa-fw'/> Enter your name">
  </b-form-group>

etc?

Issue Analytics

State:
Created 5 years ago
Comments:8 (6 by maintainers)

Top GitHub Comments

2reactions

lianeecommented, Oct 14, 2018

is that not what you want? https://jsfiddle.net/6tq953cw/

if not, perhaps a picture would help me to understand

1reaction

zoladkowcommented, Dec 18, 2018

and in case someone would want to us FA inside input groups, this works quite well:

<b-input-group>
    <b-input-group-prepend>
        <div class="input-group-text"><i class="fas fa-user"></i></div>
    </b-input-group-prepend>
    <b-form-input v-model="username" type="text" id="login-username"
                  placeholder="Enter your name"></b-form-input>
</b-input-group>

Top Results From Across the Web

font awesome icon input group inside field - Stack Overflow

All you need to do is just add the class "input-group-text" next to "input-group addon". <div class="form-group"> <label ...

How to Add Font Awesome Icons to Your Input Fields - Solodev

We have two div containers with a classname of form-group . Inside these div containers, we have three elements. - A label tag...

How to Add Icons to Your Bootstrap Form - Formden.com

Learn how to add icons and text your form fields as prepended/appended addons.

Examples - Font Awesome

After you get up and running, you can place Font Awesome icons just about anywhere with the <i> tag. Some examples appreciatively re-used...

Bootstrap Form Input - Easy HTML5 Video

<div class="form-group row"> <label for="example-text-input" class="col-2 ... Form controls just within inline forms can be different a little against their ...