Значок шрифта внутри строки поиска

Question

Как я могу поместить значок значка (значок поиска) внутри строки поиска?

Это мой HTML для панели поиска:

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

И это CSS для поиска иконок шрифта:

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

Спасибо.

Answer 1

С <input> является элементом пустоты (он не позволяет детям), вы не можете использовать :before или :after на нем.

Лучшее решение для того, что вы пытаетесь сделать, это сделать один из них:

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

Затем использовать этот CSS:

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

---

С другой стороны, сохранить оригинал HTML и использовать этот CSS:

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