How do I add font awesome to input text field?

Question

How can I add an icon of font awesome to the end of my input element?

<input id="someId" type="text" class="some-class" data-bind="textInput: myVariable">

Is it possible to keep the icon also when there is text inside?

I am using knockoutJS. Thanks guys!

Possible duplicate: https://stackoverflow.com/questions/917610/put-icon-inside-input-element-in-a-form — Glenn Ferrie, Jul 09 '18 at 16:42
Possible duplicate of [Put icon inside input element in a form](https://stackoverflow.com/questions/917610/put-icon-inside-input-element-in-a-form) — Glenn Ferrie, Jul 09 '18 at 16:42

score 1 · Answer 1 · answered Jul 09 '18 at 16:44

1

here is a sample code :

<div class="input-container">
  <input class="input-field" type="text" placeholder="Username" name="usrnm">
  <i class="fa fa-user icon"></i>
</div>

And a working jsfiddle link : http://jsfiddle.net/newzy08/aq9Laaew/77753/

answered Jul 09 '18 at 16:44

PierreN

968
4
11

score 1 · Answer 2 · answered Jul 09 '18 at 16:50

You can try using Bootstrap or any other CSS library like Semantic UI, Materialise etc.

In Bootstrap, this can look like this:

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <i class="fa fa-at"></i> <!-- Use of font awesome icon -->
      </div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>
</form>

To add icon at the end of input field:

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
    <div class="input-group-append">
      <div class="input-group-text">
        <i class="fa fa-at"></i>
      </div>
    </div>

  </div>
</form>

See an example at Codepen

How do I add font awesome to input text field?

2 Answers2