Support » Alpha/Beta/RC » Adding a custom font icon to the Toolbar

  • Resolved Guillaume Assire


    Anybody succeeded in adding a custom font icon to the Toolbar with WP3.8 ?

    Based on
    I could successfully add a dashicon or an Awesome Font icon to the Toolbar, as per the first two methods of the above, unfortunately for custom font icons in SVG format, I got hit by the WP3.8 “background-image: none !Important;” that is aiming at the removal of older image icons from the Toolbar.

    I then tried to add my base64-encoded font directly into the HTML element (by add_noding it to the title), I’m not sure how crap it is, but at least I do see the icon. Unfortunately, it’s neither the correct size / color, that I should be able to fix on my side, nor resizable / colorable, and this is where I’m totally stuck…

    Any suggestions to fix both of the above, and an easy way to add a custom icon in a resizable / colorable way, would be most appreciate.
    Note: by resizable / colorable I mean that if I CSS-change the font attributes, all the icons including custom ones will take that change into account.


    Related topics:
    MP6 – how to style admin bar entries – Falling back to PNG format, which I understand is not a font icon hence neither resizable nor colorable
    Toolbar menu issue – Stressing the need for custom icons in the Toolbar, for the best end-user experience

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Ipstenu (Mika Epstein)


    🏳️‍🌈 Plugin Review Team Rep

    Don’t use them as background images, use the :before psudeo-class.

    Sorry to sound as an inconvenience, I’m only half way there.

    I’m using this:
    #wpadminbar #wp-admin-bar-my-symposium-admin > .ab-item > span.ab-icon:before { content: url('data:image/svg+xml;base64,PD94bgdm... [cut] ...9zdmc'); }

    And all I get is an image on the Toolbar, black on transparent, or whichever color is specified in the SVG ‘fill’ field, neither resizable, nor colorable.

    I must have misread the litterature I found here, as I was thinking the image would be used as a sprite to mimick font icons. Shouldn’t it be the case, am I doing something wrong ? Or maybe the only way to have an icon to behave like a fonticon is to make a fonticon out of it…?

    A quick follow-up to confirm I could achieve what I want by converting my SVG file into a font, using IcoMoon. Although not painful at all, this seems pretty much “the long way round” to me. If anybody has an answer on how to use a SVG file directly, I’d appreciate. For now, I will mark this topic as solved…

    For the records…

    function symposium_toolbar_set_custom_fonticon() {
    	if ( !is_admin_bar_showing() )
    	echo '<style type="text/css">';
    	echo '#wpadminbar #wp-admin-bar-my-symposium-admin > .ab-item > span.ab-icon:before { ';
    		echo 'font-family: WPST-icons !important; ';
    		echo 'content: \'\e601\'; ';
    	echo ' } ';
           echo '</style>';
    add_action( 'admin_head', 'symposium_toolbar_set_custom_fonticon' );
    add_action( 'wp_head', 'symposium_toolbar_set_custom_fonticon' );
    // enqueue custom font icon
    function enqueue_custom_fonticon() {
    	if ( !is_admin_bar_showing() )
    	wp_enqueue_style( 'wpst-font', WP_PLUGIN_URL.'/wp-symposium-toolbar/css/wp-symposium-toolbar_fonticons.css', false, null );
    add_action( 'admin_enqueue_scripts', 'enqueue_custom_fonticon' );
    add_action( 'wp_enqueue_scripts', 'enqueue_custom_fonticon' );
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding a custom font icon to the Toolbar’ is closed to new replies.