[Bootstrap] How to use Font Awesome in form submit button

(Tested in Font Awesome with Bootstrap 4)

I usually use Font Awesome as a fa-* class in <i> tag, but little did I know that it is possible to use Font Awesome in <input> tag.

The helpful use case is when we need to add search icon in submit button.

submit-button-form-bootstrap-wordpress
In this case, we need to find a way to add Font Awesome into <input type=”submit”> tag.

While it is arguable that <button> can easily accomplish this, there are differences between <button> and <input> such that <button> is not working in old browsers.

The solution

This solution is written by Pavlo at StackOverflow.

  1. Add .fa-input class to <input type=”submit”>

    <input type="submit" class="btn fa-input" value="&#xf043; Input">
  2. For CSS, add this line
    .fa-input {
      font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

The code for each icon can be found here: http://fortawesome.github.io/Font-Awesome/cheatsheet/

Reference: stackoverflow.com/questions/11686007/font-awesome-input-type-submit


Posted

in

,

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *