Search code examples
phpcsswordpressfontasticdashicons

Enqueue fontastic.me as 'dashicons' without blocking existing Wordpress dashicons

What I am trying to achieve:

I want to use custom icons on my Wordpress website (including in the Admin Menu).

What I have done so far

I have set up an account on fontastic.me and enqueued the font using the following in functions.php hooked to 'admin print styles'

wp_enqueue_style('fontastic-css', 'https://file.myfontastic.com/<mycode>/icons.css');

I've set the name of my icons on fontastic me to be 'dashicons' because this way you can directly use them in the admin menu e.g.

add_menu_page(
            'Page Title',
            'Menu Title',
            'Capability',
            'menu_slug',
            [ $this, 'call_back' ],
            'dashicons-custom-icon-name',
            1
        );

If you call them something else e.g. custom-icons you can't use them so easily.

I have also tried enqueuing in other ways but the issue is the same as I document below.

What's the issue?

However, by doing this I am evidently overwriting / blocking / generally interfering with the existing 'dashicons' library provided with Wordpress.

This means any dashicons throughout Wordpress that are not in my library fail to load and I am left with empty squares in their spaces.

Any help identifying how I can add to the dashicons library, rather than overwrite it would be much appreciated. Thanks.

Solution

  • A solution to this problem is to do the following:

    1) Go back to fontastic.me and change the font so it is no longer 'dashicons' but something else e.g. 'customicons'.

    2) Remove the code 'dashicons-custom-icon-name' from the menu function - let it default to the standard 'dashicons-admin-generic'.

    3) Download your font from fontastic me and open it an an editor - so you have a reference of all of the icon codes - I can't find these on the website.

    4) Add the following to your style sheet for every icon you would like to target

    #adminmenu li.toplevel_page_bnfo_database div.wp-menu-image.dashicons-admin-generic:before { // change 'menu_slug' to whatever your menu slug is
font-family: yourfont; // this needs to be whatever you called it on fontastic.me
content: "\62"; // Whichever icon you want to show.
}

    Why this isn't a perfect solution

    This seems to require more code and be more cumbersome than the solution I was originally pursuing.

    However, it is the solution that plugin providers (e.g. WooCommerce) are using so might be the best bet.