[Resolved] Custom Datepicker icon not displaying in correct size

[Author]

Posts

[Luigi Bella]

I have replaced the datepicker icon using a method mentioned in a different thread using the functions.php file, but even with CSS I cannot get the new icon to display in the correct size on the backend.
hidden link

The frontend works just fine, here is a page where you can see it: hidden link

However, adding the following CSS is not affecting the size on the backend:
img.ui-datepicker-trigger {
max-width: 20px !important;
}

[Christian Cox]

Hi, if you want to load custom CSS in the back-end of the site, you must enqueue it in your theme separately from the front-end CSS. I don't think Additional CSS in the theme customizer is loaded in the back-end, only in the front-end. Here's some example code I use in a child theme to load a custom stylesheet in admin:

function tssupp_load_custom_wp_admin_style() {
        wp_register_style( 'tssupp_custom_wp_admin_css', get_stylesheet_directory_uri() . '/admin-style.css', false, '1.0.0' );
        wp_enqueue_style( 'tssupp_custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'tssupp_load_custom_wp_admin_style' );

This code loads the stylesheet admin-style.css, from my child theme directory, in wp-admin. Just an example, you can customize it to fit your needs according to the documentation here: https://developer.wordpress.org/reference/hooks/admin_enqueue_scripts/
You can add a parameter $hook_suffix to the callback to get information about the current admin page, so the stylesheet only loads where you might need it.

[Luigi Bella]

Thank you, Christian! This got me pointed in the right direction and a simple Google search helped me put together the following:

add_action('admin_head', 'calendar_icon_size');

function calendar_icon_size() {
echo '<style>
img.ui-datepicker-trigger {
max-width: 20px !important;
}
</style>';
}

The issue is now resolved.