Question 227749 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – want to add an icon in the place holder

I have to add an location icon in the placeholder of a label in react.

                   <label>
                      Places
                      <input
                        className="p-2"
                        type="text"
                        placeholder="Places of the Package"
                      ></input>
                    </label>

chatgpt said that following code

<label>
  Places
  <div class="input-group">
    <input
      type="text"
      class="form-control"
      placeholder="Places of the Package"
    />
    <span class="input-group-text">
      <i class="bi bi-geo-alt"></i>
    </span>
  </div>
</label>

But this also did not worked. Any alternatives for this issue ?

Tags:

3

Answers


  1. 0

    You need to install the Bootstrap icons using npm i bootstrap-icons

    Check out the official Boostrap Icons repo to learn more.

    Login or Signup to reply.
  2. 0

    I hope it works for you

    .input-with-icon input::placeholder {
  padding-left: 30px;
  background-image: url("https://pbs.twimg.com/profile_images/1511043794937991169/3B5fpOw8_400x400.png");
  background-size: contain;
  background-repeat: no-repeat;
}
    <div class="input-with-icon">
  <input type="text" placeholder="Enter text here">
</div>
    Login or Signup to reply.
  3. 0

    you can used that code
    `enter code

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script
      src="https://kit.fontawesome.com/7cb3499137.js"
      crossorigin="anonymous"
    ></script>
    <style>
      input[type="text"] {
        padding: 0.3rem 0.3rem 0.3rem 40px;
        font-size: 1em;
        outline: none;
      }
      .inputwithicon {
        position: relative;
      }
      .inputwithicon i {
        position: absolute;
        left: 8px;
        top: 8px;
        padding: 0px 8px 0px;
        color: aqua;
      }
      input[type="text"]:focus {
        color: aqua;
      }
      input[type="text"] {
        color: aqua;
      }
      input[type="text"]::placeholder {
        color: aqua;
      }
      .inputwithicon input[type="text"]:focus + i {
        color: aqua;
      }
    </style>
    <title>Static Template</title>
  </head>
  <body>
    <div class="inputwithicon">
      <input type="text" placeholder="enter your phone number" />
      <i class="fas fa-phone-alt"></i>
    </div>
  </body>
</html>

    `

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search