Add icon in typeahead input box

Question

HTML Code -

<div class="input-group-btn">
   <div id="custom-templates">
       <input class="typeahead caret" id="cur1" name="cur1" onkeypress="getData()" class="form-control" style=" color: black;text-transform: uppercase;border: 0px;border-radius: 0px 5px 5px 0px;" aria-label="You Send" type="text" placeholder="BTC" value="BTC">
   </div>
</div>

Typeahead JS Code -

var bestPictures = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: 'http://localhost/api/currency.php',
});


$('#custom-templates .typeahead').typeahead(null, {
  name: 'best-pictures',
  display: 'value',
  source: bestPictures,
  templates: {
    empty: [
      '<div class="empty-message">',
        'unable to find any crypto currency',
      '</div>'
    ].join('\n'),
    suggestion: Handlebars.compile('<div><img src="{{image}}" class="svg">&nbsp;&nbsp;&nbsp;<strong style="text-transform: uppercase;">{{value}}</strong> – {{year}}</div>')
  }
});

Output -

As shown in the output, the image is added in the dropdown. Is there any way to display the icon as well, in the input box? Like when one clicks on BTC (see screenshot) the Image/ICON should be added in the inputbox along with the name.

Answer 1

Either by using:

<span><i class="fa fa-bitcoin blue">&nbsp;</i>before input and after input with CSS as follow:

.blue{
color:blue;
}

Or:

<input id="icon" style="text-indent:20px;" type="text" placeholder="BTC" />

with the CSS as follow:

 background-image:url(https://i.stack.imgur.com/SEjw8.png); /*change with your image*/
 background-repeat: no-repeat; 
 background-position: 2px 2px; 
 background-size: 12px 12px; 

.blue{
color:blue;
}

#icon{
background-image:url(https://i.stack.imgur.com/SEjw8.png); /*change with your image*/
background-repeat: no-repeat; 
background-position: 2px 2px;
background-size: 12px 12px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="input-group-btn">
   <div id="custom-templates">
       <span><i class="fa fa-bitcoin blue">&nbsp;</i><input class="typeahead caret" id="cur1" name="cur1" onkeypress="getData()" class="form-control" style=" color: black;text-transform: uppercase;border: 0px;border-radius: 0px 5px 5px 0px;" aria-label="You Send" type="text" placeholder="BTC" value="BTC"></span><br>
       <input id="icon" class="typeahead caret" id="cur1" name="cur1" onkeypress="getData()" class="form-control" style="text-indent:20px; color: black;text-transform: uppercase;border: 0px;border-radius: 0px 5px 5px 0px;" aria-label="You Send" type="text" placeholder="BTC" value="BTC">
   </div>
</div>

Update:

To convert: FontAwesome Icons to Image

For more reference check here(1) or here(2)

Background-size

Background-position