将图标添加到搜索表单中的占位符文本

时间:2017-05-24 作者:JoaMika

我正在尝试在我的搜索表单的占位符文本中添加一个图标,如下所示,但我无法使其正常工作。如果这是可能实现的,有什么想法吗?

 <form role="search" method="get" class="searchform group" action="<?php echo home_url( \'/\' ); ?>">
     <input required type="search" class="search-field" minlength="3" maxlength="50" placeholder="<?php echo esc_attr_x( \'<i class="x-icon x-icon-angle-right" data-x-icon="" aria-hidden="true"></i>Search\', \'placeholder\' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( \'Search...\', \'label\' ) ?>" /><button type="submit" class="search-submit">[x_icon type="search"]</button></form>

1 个回复
最合适的回答,由SO网友:S1933 整理而成

如果您正在使用FontAwesome, 您可以在占位符文本中显示如下图标:

HTML

<input placeholder="&#xf0e0;" class="fontAwesome">
CSS

.fontAwesome{ font-family: \'Helvetica\', FontAwesome, sans-serif; }

结束

相关推荐

custom search result page

我所做的,我创建搜索。php<?php get_header(); ?> <div class=\"wapper\"> <div class=\"contentarea clearfix\"> <div class=\"content\"> <h1 class=\"search-title\"> <?php echo $wp_query->found_posts; ?>&#