CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
user1856464
user1856464

Reputation: 45

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

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

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

<input type="button" id="google-search" name="btnI" formaction="https://www.google.com/search?q=adprizes%2B+" class="searchButton2" data-toggle="tooltip" data-placement="top" title="&nbsp;Pesquisar"/>

Upvotes: 2

Views: 153

Answers (4)

davidkonrad
davidkonrad

Reputation: 85528

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

<a id="google-search" name="btnI" href="https://www.google.com/search?q=adprizes%2B+" class="btn searchButton2" data-toggle="tooltip" data-placement="top" title="&nbsp;Pesquisar">
<i class="fa fa-times fa-lg"></i>
</a>

http://jsfiddle.net/afuhvp1g/

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

Upvotes: 1

Varun Kumar
Varun Kumar

Reputation: 56

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;
    }
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>



<button type="button" id="google-search" name="btnI" formaction="https://www.google.com/search?q=adprizes%2B+" class="searchButton2" data-toggle="tooltip" data-placement="top" title="&nbsp;Pesquisar"> 
<i class="fa fa-search"  aria-hidden="true"></i>
</button>

Upvotes: 0

Abdul Moeez
Abdul Moeez

Reputation: 1401

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.

<button id="google-search" name="btnI" formaction="https://www.google.com/search?q=adprizes%2B+" class="searchButton2" data-toggle="tooltip" data-placement="top" title="&nbsp;Pesquisar"><i class="fa fa-times fa-lg"></i></button>

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

Upvotes: 1

Dima Vak
Dima Vak

Reputation: 619

<button id="google-search" name="btnI" formaction="https://www.google.com/search?q=adprizes%2B+" class="searchButton2" data-toggle="tooltip" data-placement="top" title="&nbsp;Pesquisar"> <i class="fa fa-times fa-lg"></i></button>

Can you try this? I hope it help you)

Upvotes: 1

Related Questions