How to get font awesome icon into input type text

Question

I have trying for font awesome icon into text input type.

But can get idea and it's not working.

It will be like in below image.

.search_location{
    padding: 9px 10px 8px 10px;
    background: #fff;
    color: #777777;
    position: relative;
}
i.icon-map-marker 
{ 
  position: absolute; 
  top: 10px; 
  left: 50px;
}

<p>
 <input type="text" class="search_location" value="Choose Location">
<i class="icon-map-marker"></i>
</p>

you have to make parent element `p` to `position: relative` not that input element — vivekkupadhyay, Jan 10 '17 at 10:09

Ced · Answer 1 · 2017-01-10T10:37:27.957

1

You could try this :

    p{
      position: relative;
      font-family: 'FontAwesome';
    }
    p::after{
        position: relative;
        left: -20px;
        content: "\f002";
    }
    input{
      padding-right: 20px;
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<p>
     <input type="text" class="search_location" value="Choose Location">
    </p>

Where content is your icon unicode. You'll have to specify the font-family as well so it uses font awesome (unicodes are found on their icon page).

https://jsfiddle.net/h6877894/2/

edited Jan 10 '17 at 10:37

answered Jan 10 '17 at 10:16

Ced

15,847
14
87
146

Same thing that i want exact font awesome on right corner as like in image – Prasath V Jan 10 '17 at 10:21
@PrasathV fixed, just make it after instead. – Ced Jan 10 '17 at 10:24
Thank you but one more doubt.. I've used the unicode 041 for location but it shows alpahbet? – Prasath V Jan 10 '17 at 10:26
@PrasathV did you set the font-family to font-awesome ? – Ced Jan 10 '17 at 10:27
Yes.. Showing some alpahbet 'A' – Prasath V Jan 10 '17 at 10:31
@PrasathV that's a font issue, you didn't apply the font-family correctly check update. it works correctly for me – Ced Jan 10 '17 at 10:37
Yes it's Working.. Thank you. – Prasath V Jan 10 '17 at 10:44

Mohammad Usman · Accepted Answer · 2017-01-10T10:37:58.187

To place an element with position: absolute usually we need to add position: relative on parent element. As from Documentation:

The absolutely positioned element is positioned relative to nearest positioned ancestor (non-static). If a positioned ancestor doesn't exist, the initial container is used.

I would suggest you to use a bit modified HTML as shown below:

<div class="input-holder">
  <input type="text" class="search_location" value="Choose Location">
  <i class="fa fa-map-marker icon"></i>
</div>

With some following changes in css:

* {box-sizing: border-box;}

.input-holder {
  position: relative;
  width: 300px;
}

.search_location {
  display: block;
  width: 100%;
}

* {box-sizing: border-box;}
.input-holder {
  position: relative;
  width: 300px;
}
.search_location {
    padding: 9px 10px 8px 10px;
    background: #fff;
    display: block;
    color: #777;
    width: 100%;
}
.icon { 
  position: absolute;
  right: 10px;
  top: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input-holder">
  <input type="text" class="search_location" value="Choose Location">
  <i class="fa fa-map-marker icon"></i>
</div>

How to get font awesome icon into input type text

2 Answers2

Linked