CODEWITHSUNDEEP
javascriptfont-awesomeinput-field
dafna
dafna

Reputation: 973

How do I add font awesome to input text field?

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!

Upvotes: 1

Views: 162

Answers (2)

codejockie
codejockie

Reputation: 10892

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

Upvotes: 1

PierreN
PierreN

Reputation: 988

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/

Upvotes: 1

Related Questions