搜索欄內的圖標字體

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; 
}