此代码来自full-screen-search.js 将搜索输入和按钮的选择器替换为您的字体真棒按钮选择器的插件文件，如下所示：

jQuery( document ).ready( function( $ ) {

    // ... display the Full Screen search when user clicks the font awesome button
    $( \'<font awesome button selector>\' ).on( click\', function( event ) {
        // Prevent the default action
        event.preventDefault();

        // Display the Full Screen Search
        $( \'#full-screen-search\' ).addClass( \'open\' );

        // Focus on the Full Screen Search Input Field
        $( \'#full-screen-search input\' ).focus();
    } );

    // Hide the Full Screen search when the user clicks the close button
    $( \'#full-screen-search button.close\' ).on( \'click\', function( event ) {
        // Prevent the default event
        event.preventDefault();

        // Hide the Full Screen Search
        $( \'#full-screen-search\' ).removeClass( \'open\' );
    } );

} );

您可以在自定义js文件中使用上述代码。但是如果你不想写重复的代码，如果你可以编辑插件js文件full-screen-search.js 然后，您只需添加如下所示的选择器，当font awesome图标具有焦点或单击时，它将显示叠加。

// When the document is ready...
jQuery( document ).ready( function( $ ) {

    // ... display the Full Screen search when:
    // 1. The user focuses on a search field, or
    // 2. The user clicks the Search button
    $( \'form[role=search] input, form[role=search] button, <font awesome button selector>\' ).on( \'focus, click\', function( event ) {
        // Prevent the default action
        event.preventDefault();

        // Display the Full Screen Search
        $( \'#full-screen-search\' ).addClass( \'open\' );

        // Focus on the Full Screen Search Input Field
        $( \'#full-screen-search input\' ).focus();
    } );

    // Hide the Full Screen search when the user clicks the close button
    $( \'#full-screen-search button.close\' ).on( \'click\', function( event ) {
        // Prevent the default event
        event.preventDefault();

        // Hide the Full Screen Search
        $( \'#full-screen-search\' ).removeClass( \'open\' );
    } );

} );