input框中引入fontawesome图标的方法

1.引入fontawesome图标：可以单独加一个class来申明该图标的唯一性。 

 

<form role=”search” method=”get” action=”<?php echo home_url( ‘/’ ); ?>”> 

<div class=”form-group”> 

<div class=”form-wrapper”><i class=”fa fa-search fa-lg”></i></div> 

<input type=”text” name=’s’ id=’s’ placeholder=”输入搜索关键词并按回车键” class=”form-control” placeholder=”” x-webkit-speech></div> 

</form> 

 

当然还可以添加button标签，使得点击图标具有搜索功能： 

<form role=”search” method=”get” action=”<?php echo home_url( ‘/’ ); ?>”> 

<div class=”form-group”> 

<input type=”text” name=’s’ id=’s’ placeholder=”输入搜索关键词并按回车键” class=”form-control” placeholder=”” x-webkit-speech><button class=”search-icon” type=”submit” title=”搜索”><i class=”fa fa-search fa-lg”></i></button> 

</div> 

</form> 

2.添加css： 

 

.form-group{ position: relative; } 

.form-wrapper i.fa{ position: absolute; top: 10px; left: 10px; } 

.form-group input { text-indent: 30px;} 

 

//button图标css 

 

button.search-icon{top:27px;right:168px;background-color:transparent;border:none;position: absolute; } 

 

…………………………………………… 

 

注意：代码直接复制可能无效，需要手动输入，可能跟编码有关。 

 

……………………………………………. 

 

最后附加wordpress菜单栏加入搜索框代码，只需要在functions.php文件最后加入如下代码即可： 

 

/** 

* Add searchbox in menubar 

*/ 

add_filter( ‘wp_nav_menu_items’,’add_search_box’, 10, 2 ); 

 

function add_search_box( $items, $args ) { 

$items .= ‘ 

<ul> 

<li>’ . get_search_form( false ) . ‘</li> 

</ul> 

‘; 

return $items; 

}