Icon font inside a search bar

Question

How can I put an icon font (search icon) inside a search bar?

This is my html for the search bar:

<input class="search-input" type="search" placeholder="Search">

And this is the CSS for the search icon font:

.icon-search:before { content: '🔍'; } /* '\1f50d' */

Thanks.

Answer 1

Since <input> is a void element (it doesn't allow any children), you can't use :before or :after on it.

The best solution for what you're trying to do would be to do one of these:

<span class="search-input-icon">&#x1f50d;</span><input type="search" placeholder="Search" class="search-input" />

Then use this CSS:

.search-input-button {
    position:absolute;
    margin-left:4px; /* adjust as needed */
}
.search-input {padding-left:16px;}

---

Alternatively, keep your original HTML and use this CSS:

.search-input {
    padding-left:16px;
    background-image:url('some_icon.png');
    background-position:0% 50%;
    background-repeat:no-repeat;
}