how can I align font awesome icon in bootstrap button?

user5000215 Published at Dev

user5000215

I would like to ask for some help. I would like to align the font awesome icon in the middle of the button. Right now it only centers when I have an height of at least 50px.

This is what I am talking about:

Here is my css:

    .search {
      padding: 5px 0;
      width: 50px;
      height: 10px;
      position: relative;
      left: 10px;
      float: left;
      line-height: 22px;
    }

    .search input {
        position: absolute;
        width: 0px;
        float: Left;
        margin-left: 20px;
        -webkit-transition: all 0.7s ease-in-out;
        -moz-transition: all 0.7s ease-in-out;
        -o-transition: all 0.7s ease-in-out;
        transition: all 0.7s ease-in-out;
        height: 20px;
        line-height: 18px;
        padding: 0 2px 0 2px;
        border-radius:1px;
        top: 15px;

     }

     .search:hover input,
     .search input:focus {
        width: 100px;
        margin-left: 0px;
        z-index: 1000;
     }

    .btn {
      height: 20px;
      position: absolute;
      right: 0;
      top: 15px;
      border-radius:1px;
      z-index: 1001;

    }

here is the html:

  <!-- search -->    
  <div class="search">
    <input type="text" class="form-control input-sm" maxlength="64" placeholder="Search" />
    <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i></button>
  </div>
  <!-- einde search -->

Can anyone help me out with my problem?

Thanks!

Kind Regards, Kevin.

Sebastian Brosch

You can set only padding-top:0; to the .btn and the icon is vertically centered.

Here a working fiddle: https://jsfiddle.net/sebastianbrosch/rw4eoz6b/

Collected from the Internet

Please contact [email protected] to delete if infringement.