How to add a search icon to a search bar?-CodePudding

I've created a search bar and am looking to add a non-functional magnifying glass icon to it on the far left. For this, I use an icon imported from the web in my html file. Here is my code for the icon:

<div >
   <i ></i> <!--html file -->
</div>

@import url('https://fonts.googleapis.com/css2?family-Poppins');


.icon {
    height: 55px; /* css file*/
    width: 55px; 
    line-height: 55px; 
    position: absolute;
    top:0;
    right: 0;
    text-align: center;
    font-size: 20px;
}

and the one for the search bar:

input {    
    width: 570px;
     ...
    padding: 5px;
    font-size: 11pt;
}

When I open my file in a browser, the icon is not contained in the search bar and is instead on the far right of the page.

CodePudding user response：

i wish this will help u!!

<div >
  <input type="text" />
  <i ></i>
</div>

CSS

@import url("https://fonts.googleapis.com/css2?family-Poppins");
.search {
  position: relative;
}

.fa-search {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 20px;
}

.search input {
  padding: 5px 22px 5px 2px;
}

and u can change what u want with css

CodePudding user response：

The .icon is positioned absolutely with a distance of 0px to the right side. If this is not what you want, remove position: absolute, top: 0, and right: 0. The position: absolute rule is also the reason why the icon is not contained in the search bar (it's not in the flow of the page anymore).

I would do something like this (the icon is a div with blue background for demonstration purposes):

@import url('https://fonts.googleapis.com/css2?family-Poppins');

.search-bar {
    display: flex;
}

.icon {
    height: 55px;
    width: 55px; 
    line-height: 55px; 
    text-align: center;
    font-size: 20px;
    background-color: #0000EE;
   
}

input {    
    width: 570px;
    padding: 5px;
    font-size: 11pt;
}

<div >
    <div >
        <i ></i>
    </div>
    <input type="text">
</div>

CodePudding user response：

hello

You can use fontawesome. Add the following link to your head section.

<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css">
</link>

Then give the desired tag the following class and it's done.