Làm cách nào để thêm biểu tượng vào mục thanh quản trị mới?

Tôi có một chức năng thêm các mục vào thanh công cụ WordPress. Ví dụ:

$args2 = array(
    'id'    => 'conversations_unread',
    'title' => $visitor['conversations_unread'] . ' &nbsp ',
    'href'  => XenForo_Application::get('options')->boardUrl . '/conversations'
);

Làm thế nào để tôi có được một biểu tượng ở bên trái của mặt hàng mới này?

Tôi đã thử sử dụng 'meta' nhưng biểu tượng không hiển thị.

'meta' => array( 'class' => 'ib-icon' ),

Tôi đã đọc một tài liệu tham khảo để thêm hình ảnh vào 'tiêu đề' nhưng tôi muốn biểu tượng này giống như bong bóng bình luận.

Ví dụ đầy đủ

Một plugin nhanh (mu-) làm ví dụ:

<?php
/** Plugin Name: Add Admin Bar Icon */
add_action( 'admin_bar_menu', function( \WP_Admin_Bar $bar )
{
    $bar->add_menu( array(
        'id'     => 'wpse',
        'parent' => null,
        'group'  => null,
        'title'  => __( 'Example', 'some-textdomain' ),
        'href'   => get_edit_profile_url( get_current_user_id() ),
        'meta'   => array(
            'target'   => '_self',
            'title'    => __( 'Hello', 'some-textdomain' ),
            'html'     => '<p>Hello</p>',
            'class'    => 'wpse--item',
            'rel'      => 'friend',
            'onclick'  => "alert('Hello');",
            'tabindex' => PHP_INT_MAX,
        ),
    ) );
} );

Cái nào làm cho HTML sau trở thành phần tử đầu tiên (và do đó cũng làm cho thanh quản trị của chúng ta trở nên vô dụng, nhưng đó không phải là điểm của ví dụ này):

<li id="wp-admin-bar-wpse" class="wpse--item">
    <a class="ab-item" tabindex="9223372036854775807" href="http://astro.dev/wp-admin/profile.php" onclick="alert(\'Hello\');" target="_self" title="Hello" rel="friend">Example</a>
    <p>Hello</p>
</li>

Bây giờ chúng tôi đã có một căn cứ, chúng tôi có thể quan tâm đến ...

Thêm biểu tượng

Tin buồn: Không có cách nào dễ dàng để làm điều đó. Ít nhất là không phải không thêm biểu định kiểu của riêng bạn. Như bạn có thể đọc (trong mã), có một số điều xảy ra: Tôi đã chuẩn bị HTML cần thiết để bọc Dashicon trước mục thực tế. Sau đó, tôi đã thêm một số nguyên rất cao làm số cuối cùng cho hành động - đó là điều quyết định vị trí của mục trong thanh quản trị.

<?php
/** Plugin Name: Add Admin Bar Icon */
add_action( 'admin_bar_menu', function( \WP_Admin_Bar $bar )
{
    $bar->add_menu( array(
        'id'     => 'wpse',
        'title'  => '<span class="ab-icon"></span>'.__( 'Example', 'some-textdomain' ),
        'href'   => get_edit_profile_url( get_current_user_id() ),
        'meta'   => array(
            'target'   => '_self',
            'title'    => __( 'Ahoi!', 'some-textdomain' ),
            'html'     => '<!-- Custom HTML that goes below the item -->',
        ),
    ) );
}, 210 ); // <-- THIS INTEGER DECIDES WHERE THE ITEM GETS ADDED (Low = left, High = right)

add_action( 'wp_enqueue_scripts', function()
{
    wp_enqueue_style( /* register your stylesheet */ );
}

Cuối cùng, bạn sẽ cần thêm một số quy tắc CSS trong biểu định kiểu của riêng bạn. Phần di chuyển duy nhất là wpsetrong #/id. Phần còn lại là không đổi và bằng nhau cho tất cả các mục / nút thanh quản trị. Bạn cũng có thể cần điều chỉnh topvị trí để phù hợp với Dashicon. Chỉ cần chọn một Dashicon từ trang web của họ và thêm fXXXmã trong CSS bên dưới.

#wpadminbar #wp-admin-bar-wpse .ab-icon:before {
    content: '\f306';
    top: 3px;
}

để mở rộng câu trả lời của kaiser, bạn cũng có thể ghi đè biểu tượng bằng URL hình ảnh tùy chỉnh và đặt các kiểu nội tuyến (hoặc một lần nữa riêng nếu bạn muốn), vd. biểu tượng 22px x 22px ...

$iconurl = '/images/custom-icon.png';

$iconspan = '<span class="custom-icon" style="
    float:left; width:22px !important; height:22px !important;
    margin-left: 5px !important; margin-top: 5px !important;
    background-image:url(\''.$iconurl.'\');"></span>';

$title = __( 'Example', 'some-textdomain' ),

sau đó sử dụng cho giá trị tiêu đề:

'title' => $iconspan.$title,