How to replace default icon on “Add Media” button?

The question:

I want to use a different icon for Add Media button in the standard post editing form. What’s the best way of doing it?

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

CSS is the way to go here.

Add a new CSS for admin using the admin_enqueue_scripts hook in your child theme functions.php (if you don’t have one, you’re doing something wrong)

function my_admin_enqueue_style() {
    wp_enqueue_style('my-css', get_stylesheet_directory_uri().'/css/my-admin.css', array(), '1.0.0');
}
add_action('admin_enqueue_scripts', 'my_admin_enqueue_style');

In your my-admin.css file

/* change the content to another Dashicon */
#wp-content-editor-tools .wp-media-buttons .add_media span.wp-media-buttons-icon::before {
    content: "f104";
}

/* or set a background-image instead (set content to "" in the rule before) */
#wp-content-editor-tools .wp-media-buttons .add_media span.wp-media-buttons-icon {
    background-image: url(../../wp-content/uploads/2017/10/my-image.png);
    background-position: center;
}

Available Dashicon icons here


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment