how to add image icon inside input field in bootstrap?

Question

I am trying to add image icon inside the input text field using bootstrap. I use the font-awesome icon within the input tag for the instance which is successfully implemented.

you can see in the given example below:

code for the above example:

     <form  id="main-form" method="post" action="index.php">
        <div class="main-form">
                <div class="row" id="single">
                    <div class="col-md-9 shortfieldz">
                           <i class="zmdi zmdi-link"></i>

                             <input type="text" class="form-control main-input"  id='myInput' name="url" value="" placeholder="Paste a long url" /> 

                    </div>
                    <div class="col-md-3 shortbtnz">
                        <input class="btn btn-default btn-block main-button"  type="submit"   name="Shorten" value="Shorten">
                        <!--<button class="btn btn-primary btn-block main-button" id="copyurl" type="button">Copy</button>-->
                    </div>


                </div>
        </div>
      </form>

but now I want to replace the font-awesome icon with img tag so that I add custmization to the image:

Here is what I tried:

   <form  id="main-form" method="post" action="index.php">
        <div class="main-form">
                <div class="row" id="single">
                    <div class="col-md-9 shortfieldz">
                            <img src="https://cdncontribute.geeksforgeeks.org/wp-content/uploads/GG-2.png" class="img-responsive" alt="Responsive image" width="30" height="24" /> 

                             <input type="text" class="form-control main-input"  id='myInput' name="url" value="" placeholder="Paste a long url" /> 

                    </div>
                    <div class="col-md-3 shortbtnz">
                        <input class="btn btn-default btn-block main-button"  type="submit"   name="Shorten" value="Shorten">
                        <!--<button class="btn btn-primary btn-block main-button" id="copyurl" type="button">Copy</button>-->
                    </div>


                </div>
        </div>
      </form>

output:

for reference you can see:http://www.bigto.in/

I am looking solution specifically in bootstrap. Any suggestion or direction is Apprecheated.

This [related question](https://stackoverflow.com/questions/45696685/search-input-with-an-icon-bootstrap-4/45696757#45696757) is helpful. — Carol Skelly, Feb 15 '19 at 10:07

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

Use Bootstrap's input group. Then add the image inside the span element. https://getbootstrap.com/docs/4.0/components/input-group/

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">
      <img src="https://cdncontribute.geeksforgeeks.org/wp-content/uploads/GG-2.png" class="img-responsive" alt="Responsive image" width="30" height="24" />
    </span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

Working code pen link

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 14 '19 at 20:47

Paolo

823
6
18

thanks for your answer but this is not i am looking for but its give an idea. – Feb 14 '19 at 21:16

score 1 · Answer 2 · answered Feb 14 '19 at 20:51

The link you added shows you exactly how to do it if you just look at the inspector.

the shortfieldz class has position set to relative. This tells it to position it's children relative to it's bounds

#main-form .main-form .shortfieldz {
    padding-right: 0px;
    position: relative; <--
}

Then the image is absolutely positioned. We use top and left in relation to the parent, in this case shortfieldz

#main-form .main-form .shortfieldz .zmdi-link {
    position: absolute; <---
    font-size: 28px;
    top: 15px; <---
    left: 25px; <---
    color: #8c8c8c;
    pointer-events: none;
}

Then you just add a padding to the input on the left to account for the image on top of it.

#main-form .main-form .main-input {
    padding: 0px 55px; <----
    border-width: 0;
    font-size: 19px;
    font-family: roboto;
    background: #f2f2f2;
    height: 55px;
    color: #151720;
    border-radius: 29px 0px 0px 29px;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
}

thank you so much for highlighting the CSS properties. – Feb 14 '19 at 21:16 — , Feb 14 '19 at 21:16

how to add image icon inside input field in bootstrap?

2 Answers2