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

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”>
  1. 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


Originally published at Woratana Perth.

Show your support

Clapping shows how much you appreciated Woratana Perth’s story.