WordPress 3.8 is all about the admin interface design, which is awesome! One of the improvements were the icons, served as a font – Dashicons – instead of images. The main advantage of doing it using a font, is that it can scale for retina displays and larger screens without losing quality. Neat isn’t it?! But, what happened to the old icons, served by the screen_icon() function when rendering a plugin options page at the admin? Yes, you know the answer: deprecated! So, How to set an Icon for your Plugin or Theme options page?
Screen icons are no longer used as of WordPress 3.8. — says screen_icon() function.
How to use dashicons on your plugin or theme options page?
I’ve been updating geeSearch Plus options page and I felt it would be great to have an icon placed before the h2 title tag. Here’s the process I’ve followed:
First, I’ve created an admin.css file where I’ve placed the following, as suggested by the Dashicons site:
h2:before {
content: '\f179';
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 29px/1 'dashicons';
vertical-align: middle;
margin-right: 0.3em;
}
In this case I’m saying to the browser to load the content ‘\f179’ which is the dashicon-search.
Then, you need to enqueue this css file following the usual process. Hereby the code to define the options page, then to enqueue the CSS file, and to render the page itself, where it shows the h2 tag:
<?php
add_action( 'admin_menu', 'add_admin_menu' );
function add_admin_menu() {
$options_page_hook = add_options_page( 'My Plugin Name', 'My Plugin Name', 'manage_options', 'my-plugin-page-slug', 'render_settings_page' );
add_action( 'admin_print_styles-' . $options_page_hook, 'admin_print_styles' );
}
function admin_print_styles() {
wp_enqueue_style( 'admin-css', plugin_dir_url( __FILE__ ) . 'inc/css/admin.css' );
}
function render_settings_page() {
?>
<div class="wrap">
<h2>My Plugin Name</h2>
<form action="options.php" method="POST">
<?php settings_fields( 'my-settings-group' ); ?>
<?php do_settings_sections( 'my-settings-sections' ); ?>
<?php submit_button(); ?>
</form>
</div>
<?php
}
?>
In order to use the dashicons font in your plugin or theme options page you don’t need to load the font, as it is already available, since it’s also used on the left menu.
Are you using Dashicons on your options page? Or Font Awesome?