This question already has answers here: Use Font Awesome Icon in Placeholder (19 answers) Closed 14 days ago. I'm trying to show WordPress search box into my website where i am trying to show an icon in the search box <?php get_search_form(); ?> HTML Form <form role="search" method="get" class="header-search-form" action="<?php echo home_url( '/' ); ?>"> <label> <input type="search" class="search-field" placeholder="SEARCH" value="<?php echo get_search_query(); ?>" name="s" title="Search for:" /> <i class="fa fa-search"></i> </label> </form> And This CSS /* Style the search form */ .header-search-form { display: flex; justify-content: center; /* Center the search bar in the header */ align-items: center; margin: 0 auto; padding: 5px; } .header-search-form input[type="search"] { border: 2px solid #bf2137; /* Border color */ border-radius: 20px; /* Rounded corners */ padding: 10px 15px; color: #bf2137; /* Text color */ font-size: 16px; } .header-search-form input[type="search"]::placeholder { color: #bf2137; /* Placeholder text color */ } .header-search-form input[type="submit"] { display: none; /* Hide the default search button */ } Everything is perfect fine except the fact that the () fa-fa icon is not showing in the box. I am basically looking to show fa fa search icon with in the search box.
Jese Leos
August 10, 2024
Verified user
The issue I note your search icon is being placed outside of search input field. This code is working from my side like this [enter image description here]1 HTML File <form role="search" method="get" class="header-search-form"> <label> <div class="search-input-container"> <input type="search" class="search-field" placeholder="Search" name="s" title="Search for:" /> <i class="fa fa-search search-icon"></i> </div> </label> </form> CSS File .header-search-form { display: flex; justify-content: center; align-items: center; margin: 0 auto; padding: 5px; } .search-input-container { position: relative; width: 100%; } .search-field { width: 100%; padding: 10px 15px; padding-right: 40px; border: 2px solid #bf2137; border-radius: 20px; color: #bf2137; font-size: 16px; } .search-field::placeholder { color: #bf2137; } .search-icon { position: absolute; right: 25px; top: 50%; transform: translateY(-50%); color: #bf2137; font-size: 16px; } .header-search-form input[type="submit"] { display: none; } Hopefully this will work from your side, Thanks