Font Awesome icon placement when used in Bootstrap input with feedback #4313

Open
traviswatsonws opened this Issue Sep 3, 2014 · 14 comments

Projects

None yet

10 participants

@traviswatsonws
traviswatsonws commented Sep 3, 2014 edited

Edit: Use the fix from @Azaret below, it works great!

When attempting to use Font-Awesome icons within a Bootstrap input with feedback, the placement is off:

image

Font-Awesome is overwriting a couple of rules that fix this alignment:

image

The workaround I'm currently using is to place the Font-Awesome <link> above Bootstrap to give the fa rules a lower precedence. Here's a snippet to reproduce (or in a codepen if you prefer):

<div class="form-group has-feedback">
    <label class="control-label">Font Awesome</label>
    <input type="text" class="form-control">
    <span class="fa fa-search form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
    <label class="control-label">Glyphicon</label>
    <input type="text" class="form-control">
    <span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
@tagliala
Member
tagliala commented Sep 3, 2014

@traviswatsonws

Thanks for reporting this

Altough FA is declared as "designed for bootstrap", dave preferred to remove framework specific workarounds in FA 4.0.

You made the right choice. Otherwise, you should override some values but you should be careful because that will also affect input-lg and input-sm, which are not affected by this issue: http://codepen.io/anon/pen/nbuFH http://codepen.io/anon/pen/CvodD

A better approach would be change .form-control-feedback in bootstrap to .form-control + .form-control-feedback so it will take priority on .fa class.

I don't know where to document this, maybe a new section

@tagliala tagliala added doc bug labels Sep 3, 2014
@tagliala tagliala added this to the 5.0.0 milestone Sep 3, 2014
@andrenarchy andrenarchy added a commit to paperhive/paperhive-frontend that referenced this issue Feb 18, 2015
@andrenarchy andrenarchy [less] fix bootstrap issue with font-awesome icons cbe0548
@nghuuphuoc

Waiting for the fix.

@traviswatsonws

@nghuuphuoc The fix I mentioned (loading FontAwesome then Bootstrap, letting BS cascade over FA) worked well for me. The project shipped with this change, and I saw no issues related to it. I can't guarantee there aren't other side effects of that order, but I didn't see any.

@jdoles
jdoles commented Mar 13, 2015

@traviswatsonws Thanks for the simple "fix". Saved me from venturing down a dark path.

@Francismori7 Francismori7 added a commit to mori7technologie/EchangeCadeauLaravel that referenced this issue Apr 11, 2015
@Francismori7 Francismori7 Fix form-control-feedback issues with FontAwesome, see FortAwesome/Fo… a0ad84c
@QuantumInformation

What is the best way to approach this one now? I'm using the latest fa and bootstrap.

@tagliala
Member
@QuantumInformation

@tagliala thanks thats great

@Azaret
Azaret commented Aug 14, 2015

My favorite workaround without BS or FA override nor changing the link order is simply do this :

<div class="form-group has-feedback">
    <label class="control-label">Font Awesome</label>
    <input type="text" class="form-control">
    <span class="form-control-feedback">
        <i class="fa fa-search"></i>
    </span>
</div>
@tagliala
Member

@Azaret thanks for sharing this!

@legshooter

Thanks @Azaret! Great fix until the official one.

@tagliala tagliala added the bootstrap label Jan 13, 2016
@tagliala
Member

Just started this wiki, feel free to improve it: https://github.com/FortAwesome/Font-Awesome/wiki/Bootstrap-Caveats

@z3ntu
z3ntu commented Feb 18, 2016

@Azaret Thank you very much!

@kezkankrayon

@Azaret Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment