Font-awesome: Font Awesome icon placement when used in Bootstrap input with feedback

[traviswatsonws]

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:

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

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]

@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

[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]

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

[quantuminformation]

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

[tagliala]

@QuantumInformation

fastest approach: https://github.com/FortAwesome/Font-Awesome/issues/4313#issuecomment-75190960

[quantuminformation]

@tagliala thanks thats great

[Azaret]

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]

@Azaret thanks for sharing this!

[legshooter]

Thanks @Azaret! Great fix until the official one.

[tagliala]

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

[z3ntu]

@Azaret Thank you very much!

[kezkankrayon]

@Azaret Thank you!

[mschoenbein]

@Azaret Thx!

[milanvdm]

Currently with Font Awesome and Bootstrap 4, I have the following problem using the posted solution:

[kezkankrayon]

@Milanvdm, Bootstrap 4 uses background images for validation feedback. For example, https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L541 .

Bootstrap 3

https://jsfiddle.net/kezkankrayon/g9sx0ahr/

<div class="form-group has-feedback">
    <label class="control-label">Font Awesome</label>
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1"> <i class="fa fa-lock"></i></span>
      <input type="text" class="form-control" placeholder="Password" aria-describedby="basic-addon1">
    </div>
    <span class="form-control-feedback">
        <i class="fa fa-eye"></i>
    </span>
  </div>

Bootstrap 4

https://jsfiddle.net/kezkankrayon/mo5mhLtn/

 <div class="form-group has-feedback-custom">
    <label class="form-control-label" for="inputSuccess1">Bootstrap 4 input with custom feedback</label>
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1"> <i class="fa fa-lock"></i></span>
      <input type="text" class="form-control" placeholder="Password" aria-describedby="basic-addon1">
    </div>
    <span class="form-control-feedback-custom">
        <i class="fa fa-eye"></i>
    </span>
    <small class="form-text text-muted">Example help text that remains unchanged.</small>
  </div>

// SCSS derrived from Bootstrap 3 Form Control Feedback.

/* TODO: import Bootstrap4 variables */
$input-height-base: 38px; //TODO: use imported Bootstrap 4 variables.
$line-height-computed:20px; //TODO: use imported Bootstrap 4 variables.

.has-feedback-custom {
  // Enable absolute positioning
  position: relative;

  // Ensure icons don't overlap text
  .form-control {
    padding-right: ($input-height-base * 1.25);
  }
}

// Feedback icon (requires .glyphicon classes) //Note: Did not look in to the effect of .glyphicon.
.form-control-feedback-custom {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2; // Ensure icon is above input groups
  display: block;
  width: $input-height-base;
  height: $input-height-base;
  line-height: $input-height-base;
  text-align: center;
  pointer-events: none;
}

// Reposition feedback icon if input has visible label above
.has-feedback-custom label {

  & ~ .form-control-feedback-custom {
    //top: ($line-height-computed + 5); // Height of the `label` and its margin
    top: 32px; //TODO: compute with bootstrap 4 variables.
  }
  &.sr-only ~ .form-control-feedback-custom {
    top: 0;
  }
}

[milanvdm]

Thanks a lot, that makes a lot of sense.

Could you explain a bit more in detail what you mean with the bootstrap 4 variables? As I would like to adapt it to a fully working sccs file for Bootstrap 4.

[ghost]

@kezkankrayon

So I currently calculated the variables as follows based on the bootstrap 3 LESS (http://getbootstrap.com/customize/):

@import "../../../../node_modules/bootstrap/scss/variables";

$line-height-computed: floor(($font-size-base * $line-height-base));
$padding-base-vertical: 1rem;
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2);

But this puts the eye quite a lot under the form.

Im curious on how those variables could be calculated correctly using bootstrap 4 and scss?
As using your values for the variables results in a good solution, it is not fully responsive of course.