如何在引导中默认显示搜索的搜索表单占位符上添加图标

Question

我正在为我的wordpress网站使用bootstrap主题。我的问题是，在我的导航栏搜索表单显示占位符作为搜索，我想改变它，这就是为什么我改变了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>

我想将占位符更改为图标，所以我应该更改这一行或其他内容吗?

Answer 1

看看答案@ Bootstrap导航栏搜索图标是否适合您。

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

user1769915的第二个答案是如何在输入框中使用字体图标的一个很好的例子。重要的是他们在占位符代码 中添加了一个span。

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

如果你在你的WordPress网站上使用像Font Awesome这样的东西，这应该可以很好地工作。

希望这对你有帮助!