How to put the x inside text field?

Question

I was trying to put clickable times (x) from font Awesome inside the text field but I could not do it also there lack of documentation for all the classes... here a link to what I have got

  <input type="text" class="form-control" id="copy-text">
  <span>
        <i class="fa fa-times xicon" aria-hidden="true"></i>
      </span>

  <span class="input-group-btn">

        <button id="copy-emoji" data-clear-btn="true" class="form-control btn-large btn-lg btn btn-success" type="button" onclick="copyall()">COPY</button>

      </span>
</div>

https://jsfiddle.net/2Lm6fup1/

thanks

Possible duplicate of [Font Awesome icon inside text input element](https://stackoverflow.com/questions/19285640/font-awesome-icon-inside-text-input-element) — jmargolisvt, Dec 24 '17 at 02:07

score 1 · Accepted Answer · answered Dec 24 '17 at 02:17

1

You can position the icon relative to .input-group.

.xicon.over {
    position: relative;
    top: 11px;
    left: -24px;
    width: 0;
    z-index: 999;
    cursor: pointer;
}

https://jsfiddle.net/2Lm6fup1/5/

answered Dec 24 '17 at 02:17

mechanicious

1,576
2
15
32

why did you add the class .over? – Kamel Labiad Dec 25 '17 at 00:52

How to put the x inside text field?

1 Answers1