From 8f1a77a070d4cd691112c1a3bfa36026e21a2aa0 Mon Sep 17 00:00:00 2001 From: "Dominik Schilling (ocean90)" Date: Wed, 5 Mar 2014 20:03:33 +0000 Subject: [PATCH] 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 --- src/wp-admin/css/admin-menu.css | 46 +++++++++---------------------- src/wp-admin/menu-header.php | 2 +- src/wp-admin/menu.php | 26 ++++++++--------- src/wp-admin/network/menu.php | 14 +++++----- src/wp-includes/css/dashicons.css | 11 ++++---- 5 files changed, 40 insertions(+), 59 deletions(-) diff --git a/src/wp-admin/css/admin-menu.css b/src/wp-admin/css/admin-menu.css index 484a29fded..e77f58df9a 100644 --- a/src/wp-admin/css/admin-menu.css +++ b/src/wp-admin/css/admin-menu.css @@ -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; } diff --git a/src/wp-admin/menu-header.php b/src/wp-admin/menu-header.php index e279c8f8f5..111aa5b293 100644 --- a/src/wp-admin/menu-header.php +++ b/src/wp-admin/menu-header.php @@ -93,7 +93,7 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) { $img_class = ' svg'; } elseif ( 0 === strpos( $item[6], 'dashicons-' ) ) { $img = '
'; - $img_class = ' dashicons ' . sanitize_html_class( $item[6] ); + $img_class = ' dashicons-before ' . sanitize_html_class( $item[6] ); } } $arrow = '
'; diff --git a/src/wp-admin/menu.php b/src/wp-admin/menu.php index 5a53cff255..4008a0986d 100644 --- a/src/wp-admin/menu.php +++ b/src/wp-admin/menu.php @@ -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'), "" . number_format_i18n($awaiting_mod) . "" ), 'edit_posts', 'edit-comments.php', '', 'menu-top menu-icon-comments', 'menu-comments', 'none' ); +$menu[25] = array( sprintf( __('Comments %s'), "" . number_format_i18n($awaiting_mod) . "" ), '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 = "" . number_format_i18n($update_data['counts']['plugins']) . ""; } -$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'); diff --git a/src/wp-admin/network/menu.php b/src/wp-admin/network/menu.php index 8ab3685496..4c4dadd0f7 100644 --- a/src/wp-admin/network/menu.php +++ b/src/wp-admin/network/menu.php @@ -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' ), "" . number_format_i18n( $update_data['counts']['themes'] ) . "" ), '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' ), "" . number_format_i18n( $update_data['counts']['plugins'] ) . "" ), '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' ), "" . number_format_i18n($update_data['counts']['total']) . "" ), '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); diff --git a/src/wp-includes/css/dashicons.css b/src/wp-includes/css/dashicons.css index e1f24a1222..a24d995798 100644 --- a/src/wp-includes/css/dashicons.css +++ b/src/wp-includes/css/dashicons.css @@ -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 {