Currently I'm practicing how to code by building a similar website and I got stuck with this step which's adding a search word together with the search icon just like in the shown image.

I did type the code for the word "Sök" which's in Swedish means "Search" but I'm curious how to add the icon so it looks the same.

CodePudding user response：

if you want to add the search icon next to the searched word just do this: put the icon and the search bar inside the same parent and set position:absolute; to the icon and position: relative; to the parent that contains both the input and icon.

for the appearance of the search icon when typing: just set display: none; to it, and use javascript when (input.value > 1) , the display of the icon will be (display: block;).

there are many ways to achieve that

CodePudding user response：

Font Awesome is great for icons - https://fontawesome.com/search?q=search

Hopefully their site will guide you through the process, but you'd add <i ></i> (as well as import their stylesheet - they will walk you through this) as a HTML icon.

Any questions let me know :)