php 默认情况下,如何在引导程序中的搜索表单占位符上添加图标,显示搜索
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16644206/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to add an icon on search form placeholder in bootstrap by default its showing search
提问by Manindra Singh
I'm using the bootstrap theme for my wordpress site. My problem is that in my navbar the search form is showing the placeholder as search and I want to change it, that's why I change the searchform.php file at this line but nothing is changing.
我正在为我的 wordpress 网站使用引导程序主题。我的问题是,在我的导航栏中,搜索表单将占位符显示为搜索,我想更改它,这就是为什么我在此行更改 searchform.php 文件但没有任何更改的原因。
Here is the form.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>
I want to change the placeholder to an icon so should I have to change this line or anything else?
我想将占位符更改为图标,所以我应该更改此行或其他任何内容吗?
回答by David Taiaroa
See if the answers @ Bootstrap navbar search iconmight work for you.
看看答案@ Bootstrap 导航栏搜索图标是否适合您。
The accepted answer from Alexey Ivanov has 3 variations of using an icon as background image in the input box. Since it's entirely CSS there should be no problem getting it to work for you with WordPress.
Alexey Ivanov 接受的答案有 3 种变体,在输入框中使用图标作为背景图像。由于它完全是 CSS,因此使用 WordPress 让它为您工作应该没有问题。
The second answer from user1769915 is a good example of how to use font-icons in the input box. The inportant bit is that they have added a span inside the placeholeder code
user1769915 的第二个答案是如何在输入框中使用 font-icons 的一个很好的例子。重要的一点是他们在占位符代码中添加了一个跨度
<input type="text" class="search-query span2" placeholder="Search…"><span class="fornav"><i class="icon-search"></i></span>
If you are using something like Font Awesomeon your WordPress site, this should probably work well.
如果您在 WordPress 网站上使用Font Awesome 之类的东西,这可能会很好用。
Hope this helps!
希望这可以帮助!