默认情况下，如何在引导程序中的搜索表单占位符上添加图标显示搜索答案

【问题标题】：how to add an icon on search form placeholder in bootstrap by default its showing search默认情况下，如何在引导程序中的搜索表单占位符上添加图标显示搜索
【发布时间】：2013-05-14 16:44:18
【问题描述】：

我正在为我的 wordpress 网站使用引导主题。我的问题是，在我的导航栏中，搜索表单将占位符显示为搜索，我想更改它，这就是我在这一行更改 searchform.php 文件但没有任何改变的原因。

这里是form.php：

<form method="get" id="searchform" class="form-search" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label for="s" class="assistive-text hidden"><?php _e( 'Search', 'the-bootstrap' ); ?></label>
<div class="input-append">
<input id="s" class="span2 search-query" type="search" name="s" placeholder="<?php esc_attr_e('Search', 'the-bootstrap' ); ?>"><!--
--><button class="btn btn-primary" name="submit" id="searchsubmit" type="submit"><?php _e( 'Go', 'the-bootstrap' ); ?></button>
</div>
</form>

我想将占位符更改为图标，所以我必须更改此行还是其他任何内容？

【问题讨论】：

标签： php html twitter-bootstrap placeholder search-form

【解决方案1】：

看看@Bootstrap navbar search icon 的答案是否对你有用。

Alexey Ivanov 接受的答案有 3 种变体，即在输入框中使用图标作为背景图像。因为它完全是 CSS，所以让它与 WordPress 一起为你工作应该没有问题。

user1769915 的第二个回答是如何在输入框中使用 font-icons 的一个很好的例子。重要的是他们在占位符代码中添加了一个跨度

<input type="text" class="search-query span2" placeholder="Search&hellip;"><span class="fornav"><i class="icon-search"></i></span>

如果您在 WordPress 网站上使用 Font Awesome 之类的东西，这应该可以正常工作。

希望这会有所帮助！

【讨论】：