# How to put a image inside of a input box?

**URL:** <https://forum.freecodecamp.org/t/how-to-put-a-image-inside-of-a-input-box/158530>\
**Category:** General\
**Created:** [November 11, 2017, 6:15pm UTC](https://forum.freecodecamp.org/t/how-to-put-a-image-inside-of-a-input-box/158530 "2017-11-11T18:15:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![John-freeCodeCamp](https://avatars.discourse-cdn.com/v4/letter/j/8edcca/32.png) [@John-freeCodeCamp](https://forum.freecodecamp.org/u/John-freeCodeCamp)\
**Post date:** [November 11, 2017, 6:15pm UTC](https://forum.freecodecamp.org/t/how-to-put-a-image-inside-of-a-input-box/158530/1 "2017-11-11T18:15:23Z")

</div>

So how would i go about, for instance, put a magnifying glass search icon into a form input text box?

A example would be google search and how they put the “search by voice” icon inside of their search box.

I would post my codepen or code but i wont and hear is why. First of all, every answer on code forums i see is way too specific to the question asked. People never can provide a general answer that works with everyone, and just take your codepen code, slightly change It to work, then give it to you so it only works for you… No one with the same question is even able to use your answer to help themselves because of this. I have seen 5 forum posts on the same topic sometimes because no one can provide a general answer to a simple question.

---

<div class="post-metadata">

**Author:** ![Dan\_Cio](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dan_cio/32/72058_2.png) [@Dan\_Cio](https://forum.freecodecamp.org/u/Dan_Cio)\
**Post date:** [November 11, 2017, 6:37pm UTC](https://forum.freecodecamp.org/t/how-to-put-a-image-inside-of-a-input-box/158530/2 "2017-11-11T18:37:34Z")

</div>

You could try an overlapping absolutely positioned div that gets `dislay:none` when clicked, but that might be complicated.

---

<div class="post-metadata">

**Author:** ![The-Fairy-Lost](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/the-fairy-lost/32/70968_2.png) [@The-Fairy-Lost](https://forum.freecodecamp.org/u/The-Fairy-Lost)\
**Post date:** [November 11, 2017, 6:40pm UTC](https://forum.freecodecamp.org/t/how-to-put-a-image-inside-of-a-input-box/158530/3 "2017-11-11T18:40:02Z")

</div>

I’m very new to coding, but I’ve had a fiddle about and maybe this could work? Apologies if it doesn’t or if you’ve tried this before, but if it does work then great!

Try putting the Unicode (?) next to the text you want in the search box or on its own, like the examples below. Would that work at all?

> \< input type=“text” placeholder=“&#x1F50D search” required\>\</ input\>
> 
> \< input type=“text” placeholder=“&#x1F50D” required\>\</ input\>

_Just a quick reminder to delete the space between the **\<** and **input** and **\</** and **input**._

---

<div class="post-metadata">

**Author:** ![jx2bandito](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jx2bandito/32/64533_2.png) [@jx2bandito](https://forum.freecodecamp.org/u/jx2bandito)\
**Post date:** [November 11, 2017, 7:12pm UTC](https://forum.freecodecamp.org/t/how-to-put-a-image-inside-of-a-input-box/158530/4 "2017-11-11T19:12:52Z")

</div>

Just plop it in as a child or a sibling then move its position around with CSS. When it comes to sizing and positioning you can treat images like any other HTML element.

---

<div class="post-metadata">

**Author:** ![John-freeCodeCamp](https://avatars.discourse-cdn.com/v4/letter/j/8edcca/32.png) [@John-freeCodeCamp](https://forum.freecodecamp.org/u/John-freeCodeCamp)\
**Post date:** [November 11, 2017, 7:33pm UTC](https://forum.freecodecamp.org/t/how-to-put-a-image-inside-of-a-input-box/158530/5 "2017-11-11T19:33:08Z")

</div>

Thanks for the suggestions. For simplistic reasons, ill just move it around with margin.

Edit: feel stupid over myself for forgetting to add bootstrap 4 and spending a hour banging my head on the wall (figuratively) about why nothing works.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:52pm UTC](https://forum.freecodecamp.org/t/how-to-put-a-image-inside-of-a-input-box/158530/6 "2021-01-16T17:52:59Z")

</div>