How to put search icon image in the search box using ionicons?

Question

I have made a form using HTML and CSS and I am trying to put a search icon all the way on the right side of the search bar something like this. I am wondering how can I use ionicons to achieve that ?

Here is the fiddle for the form.

The HTML code which I am using in order to create the search bar is:

<div id="myInput">
        <input type="text" onkeyup="myFunction()" placeholder="Search.." title="Type in a name">
</div>

Answer 1

You need to import ion icon css files to load the icon font. Please, read the doc at https://github.com/driftyco/ionicons

1. Download and extract the font pack
2. Copy the ionicons.css to your project
3. Copy the fonts folder to your project
4. Ensure the font urls within ionicons.css properly reference the fonts path within your project.
5. Include a reference to the ionicons.css file from every webpage you need to use it.

Then add the following code, it will add the search icon on the right side of the search bar.

.myInput {
  position:relative;
    width: 670px;
    margin-left: auto;
    margin-right: auto;
}
.leftadd .icon
{
  position: absolute;
  padding: 15px;
  right:0px;
  pointer-events: none;
}
.myInput input {
    background-position: 99% 50%;
    background-repeat: no-repeat;
    font-size: 16px;
    margin-top: 100px;
    width: 670px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 264px;
    margin-right: auto;
    display: block;
    margin-left: auto;
    padding: 12px 20px 12px 40px;
}

<div class="myInput leftadd">
    <i class="icon ion-home"></i>
    <input type="text" onkeyup="myFunction()" placeholder="Search.." title="Type in a name">