如何在 Html 的搜索欄中添加圖標

Question

我嘗試將來自 font awesome 的搜索圖標添加到我的搜索欄中，但該圖標只是停留在搜索欄之外。 下面是我的代碼

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

Answer 1

如果你把你的圖標放在我寫圖標的地方，它就會起作用

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

 <div class="section-b"> <span class="icon"> icon </span> <p> <input type="text"></p> </div>

Answer 2

使.section-b具有relative定位並在圖標上使用absolute 。

 .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 class="section-b"> <input class="input" type="text" name="Search" placeholder="Search"> <i class="fa-solid fa-magnifying-glass"></i> </div>

Answer 3

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 class="fa-solid fa-magnifying-glass"></i> </div>

Answer 4

首先，使用span而不是i來放置您的圖標。 應該使用斜體標記在語義上更正確。

接下來，只需將span設置為position: absolute ，然后使用top和left屬性重新定位圖標。

 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 class="section-b"> <p> <input type="text"><span class="fa-solid fa-magnifying-glass"></span></p> </div>