Search bar with magnifying glass inside using CSS - html

Question

I am trying to code a search bar with a magnifying glass icon inside the bar and no search button. I have found an example resource that I am basing my code after: Search Icon Inside Input.
I am having difficulty getting the magnifying glass icon to even appear. Also, there is the issue of the search bar itself not being vertically aligned within my primary-nav container.
I am using the URL encoder for SVG tool at URL Encoder for SVG Tool and the font awesome icon with the background tag:
<i class="fa-solid fa-magnifying-glass"></i>
Here is a snippet of my style.css:
/* || PRIMARY MENU || */
.primary-nav {
align-items: center;
height: 50px;
left: 0px;
padding: 15px;
width: 100%;
margin: 0px;
background-color: darkgray;
display: inline;
position: fixed;
top: 70px;
z-index: 3;
font-weight: bold;
}
.search-container {
align-items: center;
display: flex;
justify-content: right;
}
form .no-submit {
width: 180px;
align-items: center;
color: white;
right: 0;
display: flex;
padding: 2px;
border: 1px solid currentColor;
border-radius: 5px;
margin: 0 0;
}
input .nosubmit {
border: 1px solid white;
width: 100%;
padding: 9px 4px 9px 4px;
background-image: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.0.0 by #fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'/%3E%3C/svg%3E") no-repeat 13px center;
background-position: 10px center;
}
input[type="search"] {
border: none;
background: transparent;
margin: 0;
padding: 7px 8px;
font-size: 16px;
color: inherit;
border: 1px solid transparent;
border-radius: inherit;
}
input[type="search"]::placeholder {
color: white;
}
input[type="search"]:focus {
box-shadow: 0 0 3px 0 #3f69a8;
border-color: #3f69a8;
outline: none;
}
As well as my navigation.php view:
<div class="search-container">
<form class="no-submit">
<input class="no-submit" type="search" placeholder="Search..." method="GET">
</form>
</div>

Answer 1

There are a lot of issues in your code so let's go through them one by one.
1. Wrong selector
input .nosubmit isn't pointing at anything. Your class is named .no-submit and if you want to select input with the specific class you have to write it like this input.no-sumbit. Your selector is looking for .no-submit in input element.
2. Wrong usage of background
Here is a great example of how to use background in CSS. I haven't found usage of background where you write all parameters in a single property, as you did (I am not saying it doesn't work) so I decapsulated it into more properties. And when you want to add an image in url() better way is to insert the path to the image and not inside of the SVG file. For example, I choose a random magnifying glass icon and imported it like so:
background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg") ;
You can also import your local file it doesn't have to be online. Just change the URL for relative or absolute path to the SVG.
3. Using background when you need only background-color
It may not matter most of the time but in your code having background: transparent removes your background images so you need to use background-color: transparent.
I believe there are more mistakes in your code but these are the worst one and your code will not work with them.
Here is working code snippet:
/* || PRIMARY MENU || */
.primary-nav {
align-items: center;
height: 50px;
left: 0px;
padding: 15px;
width: 100%;
margin: 0px;
background-color: darkgray;
display: inline;
position: fixed;
top: 70px;
z-index: 3;
font-weight: bold;
}
.search-container {
align-items: center;
display: flex;
justify-content: left;
}
form .no-submit {
width: 180px;
align-items: center;
color: white;
right: 0;
display: flex;
padding: 2px;
border: 1px solid currentColor;
border-radius: 5px;
margin: 0 0;
}
input.no-submit {
border: 1px solid white;
width: 100%;
padding: 9px 4px 9px 4px;
/* You can use your image but having cleaner code is better, so I suggest saving the file and just linking it*/
/*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.0.0 by #fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'/%3E%3C/svg%3E") ;*/
background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg");
background-size: 13px;
background-repeat: no-repeat;
background-position: 10px center;
}
input[type="search"] {
border: none;
background-color: transparent;
margin: 0;
padding: 7px 8px 7px 30px;
font-size: 16px;
color: inherit;
border: 1px solid black;
border-radius: inherit;
}
input[type="search"]::placeholder {
color: white;
}
input[type="search"]:focus {
box-shadow: 0 0 3px 0 #3f69a8;
border-color: #3f69a8;
outline: none;
}
<div class="search-container">
<form class="no-submit">
<input class="no-submit" type="search" placeholder="Search..." method="GET">
</form>
</div>
Also, I have added padding so the text isn't over your magnifying glass.

Answer 2

Magnifier icon is present in google icons. Try this code:
<head>
<style>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
</head>
<body>
<i class="material-icons">search</i>
</body>

Answer 3

For putting the magnifying glass icon in the input, we use a Unicode character in the placeholder.
<input type="search" name="s" value="" style="width: 100%; margin: 0;" placeholder="🔎">