Wie füge ich einem neuen Element in der Admin-Leiste ein Symbol hinzu?

Ich habe eine Funktion, die Elemente zur WordPress-Symbolleiste hinzufügt. Zum Beispiel:

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

Wie erhalte ich links neben diesem neuen Element ein Symbol?

Ich habe versucht, das 'Meta' zu verwenden, aber das Symbol wird nicht angezeigt.

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

Ich habe einen Verweis auf das Hinzufügen des Bildes zum 'Titel' gelesen, möchte aber, dass dieses Symbol der Kommentarblase ähnelt.

Vollständiges Beispiel

Ein schnelles (Mu-) Plugin als Beispiel:

<?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,
        ),
    ) );
} );

Dies macht den folgenden HTML-Code als erstes Element (und macht daher auch unsere Admin-Leiste unbrauchbar, aber darum geht es in diesem Beispiel nicht):

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

Jetzt, wo wir eine Basis haben, können wir uns um ... kümmern.

Hinzufügen von Symbolen

Die traurige Nachricht: Es gibt keinen einfachen Weg, dies zu tun. Zumindest nicht ohne ein eigenes Stylesheet hinzuzufügen. Wie Sie lesen können (im Code), passieren einige Dinge: Ich habe den HTML-Code vorangestellt, der zum Umschließen eines Dashikons vor dem eigentlichen Element erforderlich ist. Dann habe ich der Aktion eine sehr hohe Ganzzahl als letzte Zahl hinzugefügt - das bestimmt die Position des Elements in der Admin-Leiste.

<?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 */ );
}

Schließlich müssen Sie einige CSS-Regeln in Ihr eigenes Stylesheet einfügen. Der einzige bewegliche Teil ist der wpsein der #/id. Der Rest ist konstant und für alle Elemente / Knoten der Admin-Leiste gleich. Möglicherweise müssen Sie auch die topPosition an das Dashicon anpassen. Wählen Sie einfach ein Dashicon von der Website aus und fügen Sie den fXXXCode im folgenden CSS hinzu.

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

Um die Antwort von Kaiser zu erweitern, können Sie das Symbol auch mit einer benutzerdefinierten Bild-URL überschreiben und die Stile inline setzen (oder erneut separat, wenn Sie möchten), z. ein 22px x 22px Symbol ...

$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' ),

Verwenden Sie dann für den Titelwert:

'title' => $iconspan.$title,