input框中引入fontawesome图标的方法

本文以wordpress搜索框为例。

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;
}

效果预览:

发表评论

  1. boke112导航 回复

    没想到竟然还可以这样做,学习了