How do i add an icon to my search bar in Html-CodePudding

I tried adding a search icon from font awesome to my search bar but the icon is just staying outside of the bar. below is my code

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<div >
  <p> <input type="text"><i ></i></p>
</div>

CodePudding user response：

it works if you put your icon where i wrote icon

        .icon {
           position: absolute;
        }
        .section-b{
        position: relative;
        }

<div >
  <span > icon </span>
  <p> <input type="text"></p>
</div>

CodePudding user response：

Make .section-b have relative positioning and use absolute on the icon.

.section-b {
  position: relative;
  width: 200px;
}

.section-b .input {
  border: 1px solid #ccc;
  background: #fff;
  height: 20px;
  width: 200px;
}

.section-b .fa-magnifying-glass {
  cursor: pointer;
  position: absolute;
  top: 47%;
  right: 0;
  transform: translateY(-50%);
  background: #fff;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div >
  <input  type="text" name="Search" placeholder="Search">
  <i ></i>
</div>

CodePudding user response：

Step 1: wrap the input and i tags in a div
Step 2: make the div display:inline-block and position:relative
Step 3: make the i tag position:absolute and add top:0, and right:0

div {
  position: relative;
  display: inline-block;
}

i {
  position: absolute;
  right: 0;
  top: 0;
  margin: 3px 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<div>
  <input type="text">
  <i ></i>
</div>

CodePudding user response：

First, use span instead of i to house your icon. It's more semantically correct as supposed to using the italics tag.

Next, just set the span to position: absolute and then reposition the icon using the top and left properties.

span {
  position: absolute;
  left: 8.5rem;
  top: 1.2rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<div >
  <p> <input type="text"><span ></span></p>
</div>