How to insert the font awesome icon into an input button like this?

Question

I have this code but I can't insert the icon in the middle of the button?

Please see here: http://jsfiddle.net/fsbqv3z4/

user_13216414 · Answer

Can you try this? I hope it help you)

user_13494542 · Answer

you can use button tag instead of input because in that way, you can use any text ,image or anything inside it like in following code.

But if you are going to use input then image tag i will not come inside that button.

user_1407478 · Answer

Why not simply change the to an tag, and change formaction to href? Seem to be the rational solution here. The anchor need to have added the .btn class :

http://jsfiddle.net/afuhvp1g/

Note: The link will never work form within jsfiddles iframe due to sameorigin.

user_10340565 · Answer

You can use flex-box to position items For eg : if you want to position anything inside a button in the middle you can use the below css

 .searchButton2{
      display:flex;
      align-items:center;
      justify-content:center;
      max-width: 130px;
      width: 50px;
      height: 45px;
      border: 3px solid red;
      background: #28b9ed;
      text-align: center;
      color: #fff;
      cursor: pointer;
      font-size: 14px;
      outline: none;
    }

How to insert the font awesome icon into an input button like this?

4 Answers