搜索栏内的图标字体

Question

如何在搜索栏中放置图标字体（搜索图标）？

这是我搜索栏的html：

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

这是搜索图标字体的CSS：

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

感谢。

Answer 1

由于<input>是一个void元素（它不允许任何子元素），因此您无法在其上使用: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;
}