html - 搜索栏中的图标字体

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