Introduce a `.dashicons-before` CSS class.

If you want to use a Dashicon before an element you can use the class because it will not change the elements content styling. With that you don't need to copy the entire `.dashicons` styling to your :before styling anymore.
To demonstrate this change, Admin Menu now uses Dashicons classes directly.

And it fixes a glitch in IE.

fixes #26630.

git-svn-id: https://develop.svn.wordpress.org/trunk@27418 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Dominik Schilling (ocean90) 2014-03-05 20:03:33 +00:00
parent dd59bb2a62
commit 8f1a77a070
5 changed files with 40 additions and 59 deletions

View File

@ -51,69 +51,56 @@
transition: all .1s ease-in-out;
}
.icon16.icon-dashboard:before,
#adminmenu .menu-icon-dashboard div.wp-menu-image:before {
.icon16.icon-dashboard:before {
content: '\f226';
}
.icon16.icon-post:before,
#adminmenu .menu-icon-post div.wp-menu-image:before {
.icon16.icon-post:before {
content: '\f109';
}
.icon16.icon-media:before,
#adminmenu .menu-icon-media div.wp-menu-image:before {
.icon16.icon-media:before {
content: '\f104';
}
.icon16.icon-links:before,
#adminmenu .menu-icon-links div.wp-menu-image:before {
.icon16.icon-links:before {
content: '\f103';
}
.icon16.icon-page:before,
#adminmenu .menu-icon-page div.wp-menu-image:before {
.icon16.icon-page:before {
content: '\f105';
}
.icon16.icon-comments:before,
#adminmenu .menu-icon-comments div.wp-menu-image:before {
.icon16.icon-comments:before {
content: '\f101';
margin-top: 1px;
}
.icon16.icon-appearance:before,
#adminmenu .menu-icon-appearance div.wp-menu-image:before {
.icon16.icon-appearance:before {
content: '\f100';
}
.icon16.icon-plugins:before,
#adminmenu .menu-icon-plugins div.wp-menu-image:before {
.icon16.icon-plugins:before {
content: '\f106';
}
.icon16.icon-users:before,
#adminmenu .menu-icon-users div.wp-menu-image:before {
.icon16.icon-users:before {
content: '\f110';
}
.icon16.icon-tools:before,
#adminmenu .menu-icon-tools div.wp-menu-image:before {
.icon16.icon-tools:before {
content: '\f107';
}
.icon16.icon-settings:before,
#adminmenu .menu-icon-settings div.wp-menu-image:before {
.icon16.icon-settings:before {
content: '\f108';
}
.icon16.icon-site:before,
#adminmenu .menu-icon-site div.wp-menu-image:before {
.icon16.icon-site:before {
content: '\f112'
}
.icon16.icon-generic:before,
#adminmenu .menu-icon-generic div.wp-menu-image:before {
.icon16.icon-generic:before {
content: '\f111';
}
@ -357,15 +344,8 @@
}
div.wp-menu-image:before {
font: normal 20px/1 'dashicons' !important;
speak: none;
color: #999;
padding: 7px 0;
height: 20px;
width: 20px;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

View File

@ -93,7 +93,7 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
$img_class = ' svg';
} elseif ( 0 === strpos( $item[6], 'dashicons-' ) ) {
$img = '<br />';
$img_class = ' dashicons ' . sanitize_html_class( $item[6] );
$img_class = ' dashicons-before ' . sanitize_html_class( $item[6] );
}
}
$arrow = '<div class="wp-menu-arrow"><div></div></div>';

View File

@ -22,7 +22,7 @@
* @var array
*/
$menu[2] = array( __('Dashboard'), 'read', 'index.php', '', 'menu-top menu-top-first menu-icon-dashboard', 'menu-dashboard', 'none' );
$menu[2] = array( __('Dashboard'), 'read', 'index.php', '', 'menu-top menu-top-first menu-icon-dashboard', 'menu-dashboard', 'dashicons-dashboard' );
$submenu[ 'index.php' ][0] = array( __('Home'), 'read', 'index.php' );
@ -46,7 +46,7 @@ if ( ! is_multisite() ) {
$menu[4] = array( '', 'read', 'separator1', '', 'wp-menu-separator' );
$menu[5] = array( __('Posts'), 'edit_posts', 'edit.php', '', 'open-if-no-js menu-top menu-icon-post', 'menu-posts', 'none' );
$menu[5] = array( __('Posts'), 'edit_posts', 'edit.php', '', 'open-if-no-js menu-top menu-icon-post', 'menu-posts', 'dashicons-admin-post' );
$submenu['edit.php'][5] = array( __('All Posts'), 'edit_posts', 'edit.php' );
/* translators: add new post */
$submenu['edit.php'][10] = array( _x('Add New', 'post'), get_post_type_object( 'post' )->cap->create_posts, 'post-new.php' );
@ -60,7 +60,7 @@ $menu[5] = array( __('Posts'), 'edit_posts', 'edit.php', '', 'open-if-no-js menu
}
unset($tax);
$menu[10] = array( __('Media'), 'upload_files', 'upload.php', '', 'menu-top menu-icon-media', 'menu-media', 'none' );
$menu[10] = array( __('Media'), 'upload_files', 'upload.php', '', 'menu-top menu-icon-media', 'menu-media', 'dashicons-admin-media' );
$submenu['upload.php'][5] = array( __('Library'), 'upload_files', 'upload.php');
/* translators: add new file */
$submenu['upload.php'][10] = array( _x('Add New', 'file'), 'upload_files', 'media-new.php');
@ -72,13 +72,13 @@ $menu[10] = array( __('Media'), 'upload_files', 'upload.php', '', 'menu-top menu
}
unset($tax);
$menu[15] = array( __('Links'), 'manage_links', 'link-manager.php', '', 'menu-top menu-icon-links', 'menu-links', 'none' );
$menu[15] = array( __('Links'), 'manage_links', 'link-manager.php', '', 'menu-top menu-icon-links', 'menu-links', 'dashicons-admin-links' );
$submenu['link-manager.php'][5] = array( _x('All Links', 'admin menu'), 'manage_links', 'link-manager.php' );
/* translators: add new links */
$submenu['link-manager.php'][10] = array( _x('Add New', 'link'), 'manage_links', 'link-add.php' );
$submenu['link-manager.php'][15] = array( __('Link Categories'), 'manage_categories', 'edit-tags.php?taxonomy=link_category' );
$menu[20] = array( __('Pages'), 'edit_pages', 'edit.php?post_type=page', '', 'menu-top menu-icon-page', 'menu-pages', 'none' );
$menu[20] = array( __('Pages'), 'edit_pages', 'edit.php?post_type=page', '', 'menu-top menu-icon-page', 'menu-pages', 'dashicons-admin-page' );
$submenu['edit.php?post_type=page'][5] = array( __('All Pages'), 'edit_pages', 'edit.php?post_type=page' );
/* translators: add new page */
$submenu['edit.php?post_type=page'][10] = array( _x('Add New', 'page'), get_post_type_object( 'page' )->cap->create_posts, 'post-new.php?post_type=page' );
@ -93,7 +93,7 @@ $menu[20] = array( __('Pages'), 'edit_pages', 'edit.php?post_type=page', '', 'me
$awaiting_mod = wp_count_comments();
$awaiting_mod = $awaiting_mod->moderated;
$menu[25] = array( sprintf( __('Comments %s'), "<span class='awaiting-mod count-$awaiting_mod'><span class='pending-count'>" . number_format_i18n($awaiting_mod) . "</span></span>" ), 'edit_posts', 'edit-comments.php', '', 'menu-top menu-icon-comments', 'menu-comments', 'none' );
$menu[25] = array( sprintf( __('Comments %s'), "<span class='awaiting-mod count-$awaiting_mod'><span class='pending-count'>" . number_format_i18n($awaiting_mod) . "</span></span>" ), 'edit_posts', 'edit-comments.php', '', 'menu-top menu-icon-comments', 'menu-comments', 'dashicons-admin-comments' );
unset($awaiting_mod);
$submenu[ 'edit-comments.php' ][0] = array( __('All Comments'), 'edit_posts', 'edit-comments.php' );
@ -117,7 +117,7 @@ foreach ( (array) get_post_types( array('show_ui' => true, '_builtin' => false,
}
$ptype_class = $ptype_for_id;
} else {
$menu_icon = 'none';
$menu_icon = 'dashicons-admin-post';
$ptype_class = 'post';
}
@ -144,7 +144,7 @@ $menu[59] = array( '', 'read', 'separator2', '', 'wp-menu-separator' );
$appearance_cap = current_user_can( 'switch_themes') ? 'switch_themes' : 'edit_theme_options';
$menu[60] = array( __('Appearance'), $appearance_cap, 'themes.php', '', 'menu-top menu-icon-appearance', 'menu-appearance', 'div' );
$menu[60] = array( __('Appearance'), $appearance_cap, 'themes.php', '', 'menu-top menu-icon-appearance', 'menu-appearance', 'dashicons-admin-appearance' );
$submenu['themes.php'][5] = array( __( 'Themes' ), $appearance_cap, 'themes.php' );
$submenu['themes.php'][6] = array( __( 'Customize' ), 'edit_theme_options', 'customize.php', 'hide-if-no-customize' );
if ( current_theme_supports( 'menus' ) || current_theme_supports( 'widgets' ) )
@ -167,7 +167,7 @@ if ( ! is_multisite() && current_user_can( 'update_plugins' ) ) {
$count = "<span class='update-plugins count-{$update_data['counts']['plugins']}'><span class='plugin-count'>" . number_format_i18n($update_data['counts']['plugins']) . "</span></span>";
}
$menu[65] = array( sprintf( __('Plugins %s'), $count ), 'activate_plugins', 'plugins.php', '', 'menu-top menu-icon-plugins', 'menu-plugins', 'none' );
$menu[65] = array( sprintf( __('Plugins %s'), $count ), 'activate_plugins', 'plugins.php', '', 'menu-top menu-icon-plugins', 'menu-plugins', 'dashicons-admin-plugins' );
$submenu['plugins.php'][5] = array( __('Installed Plugins'), 'activate_plugins', 'plugins.php' );
@ -180,9 +180,9 @@ $submenu['plugins.php'][5] = array( __('Installed Plugins'), 'activate_plugins'
unset( $update_data );
if ( current_user_can('list_users') )
$menu[70] = array( __('Users'), 'list_users', 'users.php', '', 'menu-top menu-icon-users', 'menu-users', 'none' );
$menu[70] = array( __('Users'), 'list_users', 'users.php', '', 'menu-top menu-icon-users', 'menu-users', 'dashicons-admin-users' );
else
$menu[70] = array( __('Profile'), 'read', 'profile.php', '', 'menu-top menu-icon-users', 'menu-users', 'none' );
$menu[70] = array( __('Profile'), 'read', 'profile.php', '', 'menu-top menu-icon-users', 'menu-users', 'dashicons-admin-users' );
if ( current_user_can('list_users') ) {
$_wp_real_parent_file['profile.php'] = 'users.php'; // Back-compat for plugins adding submenus to profile.php.
@ -202,7 +202,7 @@ if ( current_user_can('list_users') ) {
$submenu['profile.php'][10] = array(__('Add New User'), 'promote_users', 'user-new.php');
}
$menu[75] = array( __('Tools'), 'edit_posts', 'tools.php', '', 'menu-top menu-icon-tools', 'menu-tools', 'none' );
$menu[75] = array( __('Tools'), 'edit_posts', 'tools.php', '', 'menu-top menu-icon-tools', 'menu-tools', 'dashicons-admin-tools' );
$submenu['tools.php'][5] = array( __('Available Tools'), 'edit_posts', 'tools.php' );
$submenu['tools.php'][10] = array( __('Import'), 'import', 'import.php' );
$submenu['tools.php'][15] = array( __('Export'), 'export', 'export.php' );
@ -211,7 +211,7 @@ $menu[75] = array( __('Tools'), 'edit_posts', 'tools.php', '', 'menu-top menu-ic
if ( ! is_multisite() && defined('WP_ALLOW_MULTISITE') && WP_ALLOW_MULTISITE )
$submenu['tools.php'][50] = array(__('Network Setup'), 'manage_options', 'network.php');
$menu[80] = array( __('Settings'), 'manage_options', 'options-general.php', '', 'menu-top menu-icon-settings', 'menu-settings', 'none' );
$menu[80] = array( __('Settings'), 'manage_options', 'options-general.php', '', 'menu-top menu-icon-settings', 'menu-settings', 'dashicons-admin-settings' );
$submenu['options-general.php'][10] = array(_x('General', 'settings screen'), 'manage_options', 'options-general.php');
$submenu['options-general.php'][15] = array(__('Writing'), 'manage_options', 'options-writing.php');
$submenu['options-general.php'][20] = array(__('Reading'), 'manage_options', 'options-reading.php');

View File

@ -8,16 +8,16 @@
*/
/* translators: Network menu item */
$menu[2] = array(__('Dashboard'), 'manage_network', 'index.php', '', 'menu-top menu-top-first menu-icon-dashboard', 'menu-dashboard', 'div');
$menu[2] = array(__('Dashboard'), 'manage_network', 'index.php', '', 'menu-top menu-top-first menu-icon-dashboard', 'menu-dashboard', 'dashicons-dashboard');
$menu[4] = array( '', 'read', 'separator1', '', 'wp-menu-separator' );
/* translators: Sites menu item */
$menu[5] = array(__('Sites'), 'manage_sites', 'sites.php', '', 'menu-top menu-icon-site', 'menu-site', 'div');
$menu[5] = array(__('Sites'), 'manage_sites', 'sites.php', '', 'menu-top menu-icon-site', 'menu-site', 'dashicons-admin-network');
$submenu['sites.php'][5] = array( __('All Sites'), 'manage_sites', 'sites.php' );
$submenu['sites.php'][10] = array( _x('Add New', 'site'), 'create_sites', 'site-new.php' );
$menu[10] = array(__('Users'), 'manage_network_users', 'users.php', '', 'menu-top menu-icon-users', 'menu-users', 'div');
$menu[10] = array(__('Users'), 'manage_network_users', 'users.php', '', 'menu-top menu-icon-users', 'menu-users', 'dashicons-admin-users');
$submenu['users.php'][5] = array( __('All Users'), 'manage_network_users', 'users.php' );
$submenu['users.php'][10] = array( _x('Add New', 'user'), 'create_users', 'user-new.php' );
@ -26,7 +26,7 @@ $update_data = wp_get_update_data();
if ( $update_data['counts']['themes'] ) {
$menu[15] = array(sprintf( __( 'Themes %s' ), "<span class='update-plugins count-{$update_data['counts']['themes']}'><span class='theme-count'>" . number_format_i18n( $update_data['counts']['themes'] ) . "</span></span>" ), 'manage_network_themes', 'themes.php', '', 'menu-top menu-icon-appearance', 'menu-appearance', 'div' );
} else {
$menu[15] = array( __( 'Themes' ), 'manage_network_themes', 'themes.php', '', 'menu-top menu-icon-appearance', 'menu-appearance', 'div' );
$menu[15] = array( __( 'Themes' ), 'manage_network_themes', 'themes.php', '', 'menu-top menu-icon-appearance', 'menu-appearance', 'dashicons-admin-appearance' );
}
$submenu['themes.php'][5] = array( __('Installed Themes'), 'manage_network_themes', 'themes.php' );
$submenu['themes.php'][10] = array( _x('Add New', 'theme'), 'install_themes', 'theme-install.php' );
@ -35,13 +35,13 @@ $submenu['themes.php'][15] = array( _x('Editor', 'theme editor'), 'edit_themes',
if ( current_user_can( 'update_plugins' ) ) {
$menu[20] = array( sprintf( __( 'Plugins %s' ), "<span class='update-plugins count-{$update_data['counts']['plugins']}'><span class='plugin-count'>" . number_format_i18n( $update_data['counts']['plugins'] ) . "</span></span>" ), 'manage_network_plugins', 'plugins.php', '', 'menu-top menu-icon-plugins', 'menu-plugins', 'div');
} else {
$menu[20] = array( __('Plugins'), 'manage_network_plugins', 'plugins.php', '', 'menu-top menu-icon-plugins', 'menu-plugins', 'div' );
$menu[20] = array( __('Plugins'), 'manage_network_plugins', 'plugins.php', '', 'menu-top menu-icon-plugins', 'menu-plugins', 'dashicons-admin-plugins' );
}
$submenu['plugins.php'][5] = array( __('Installed Plugins'), 'manage_network_plugins', 'plugins.php' );
$submenu['plugins.php'][10] = array( _x('Add New', 'plugin'), 'install_plugins', 'plugin-install.php' );
$submenu['plugins.php'][15] = array( _x('Editor', 'plugin editor'), 'edit_plugins', 'plugin-editor.php' );
$menu[25] = array(__('Settings'), 'manage_network_options', 'settings.php', '', 'menu-top menu-icon-settings', 'menu-settings', 'div');
$menu[25] = array(__('Settings'), 'manage_network_options', 'settings.php', '', 'menu-top menu-icon-settings', 'menu-settings', 'dashicons-admin-settings');
if ( defined( 'MULTISITE' ) && defined( 'WP_ALLOW_MULTISITE' ) && WP_ALLOW_MULTISITE ) {
$submenu['settings.php'][5] = array( __('Network Settings'), 'manage_network_options', 'settings.php' );
$submenu['settings.php'][10] = array( __('Network Setup'), 'manage_network_options', 'setup.php' );
@ -50,7 +50,7 @@ if ( defined( 'MULTISITE' ) && defined( 'WP_ALLOW_MULTISITE' ) && WP_ALLOW_MULTI
if ( $update_data['counts']['total'] ) {
$menu[30] = array( sprintf( __( 'Updates %s' ), "<span class='update-plugins count-{$update_data['counts']['total']}' title='{$update_data['title']}'><span class='update-count'>" . number_format_i18n($update_data['counts']['total']) . "</span></span>" ), 'manage_network', 'upgrade.php', '', 'menu-top menu-icon-tools', 'menu-update', 'div' );
} else {
$menu[30] = array( __( 'Updates' ), 'manage_network', 'upgrade.php', '', 'menu-top menu-icon-tools', 'menu-update', 'div' );
$menu[30] = array( __( 'Updates' ), 'manage_network', 'upgrade.php', '', 'menu-top menu-icon-tools', 'menu-update', 'dashicons-admin-tools' );
}
unset($update_data);

View File

@ -12,11 +12,11 @@
font-style: normal;
}
.dashicons {
.dashicons,
.dashicons-before:before {
display: inline-block;
width: 20px;
height: 20px;
-webkit-font-smoothing: antialiased;
font-size: 20px;
line-height: 1;
font-family: "dashicons";
@ -24,12 +24,13 @@
font-weight: normal;
font-style: normal;
vertical-align: top;
-moz-transition: color .1s ease-in 0;
-webkit-transition: color .1s ease-in 0;
text-align: center;
-webkit-transition: color .1s ease-in 0;
transition: color .1s ease-in 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Admin Menu Icons */
.dashicons-menu:before {