Question

对不起，如果这是一个愚蠢的问题。

我正在使用带有Bootstrap 3.0的Wordpress 4.0，我刚刚通过functions.php文件包含了Font Awesome。一切都很好（我已经使用社交媒体的图标等）。

现在，我想改变＆＃34;搜索＆＃34;侧边栏中的按钮到Font Awesome图标（搜索图标，而不是按钮+文本）。文件wp-includes / general-template.php中的代码如下所示：

    <label>
        <span class="screen-reader-text">' . _x( '', 'label' ) . '</span>
        <input type="search" class="search-field" placeholder="' . esc_attr_x( '', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" title="' . esc_attr_x( '', 'label' ) . '" />
    </label>
    <input type="submit" class="search-submit" value="'. esc_attr_x( 'Search', 'submit button' ) .'" />

我只想要一个带有图标旁边的输入字段，如下所示：

    <label>
        <span class="screen-reader-text">' . _x( '', 'label' ) . '</span>
        <input type="search" class="search-field" placeholder="' . esc_attr_x( '', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" title="' . esc_attr_x( '', 'label' ) . '" />
    </label>
    <i class="fa fa-search"></i>

但是，这不起作用......如果我点击图标，则没有任何反应。我试图把i class等放到现在的esc_attr_x（＆＃39;搜索＆＃39;，但那也没有帮助。

Answer 1

您需要提交＆＃34;提交＆＃34;发送搜索请求的输入类型。您可以通过放置图标元素而不是搜索文本来完成此操作，如下所示：

<input type="submit" class="search-submit">
    <i class="fa fa-search"></i>
</input>

然而，编辑WP核心文件是一个非常糟糕的主意。您将在下次更新时丢失更改。而是在主题文件夹中创建一个名为searchform.php的文件，并将整个搜索表单放在那里。

Answer 2

刚刚在我正在研究的主题中实现了这一点。最重要的是要记住，没有理由不改变搜索表单的HTML，如下所示：

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
    <span class="screen-reader-text">Search for:</span>
        <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />  
</label>
    <button type="submit" class="search-submit"><span class="fa fa-search"></span></button>

我用类按钮提交了默认的wordpress输入（这样wordpress不会添加它的默认提交文本）。主要是按钮是提交类型。

Answer 3

您可以这样做：

printable

或

<input class="search" type="submit" value="&#xf002" >

CSS

<button class="search" type="submit">&#xf002</button>

用Font Awesome字体替换Wordpress中的“搜索”按钮

3 个答案: