diff --git a/src/wp-admin/css/admin-menu.css b/src/wp-admin/css/admin-menu.css
index c4b32ac4b9e87..5afb5facff698 100644
--- a/src/wp-admin/css/admin-menu.css
+++ b/src/wp-admin/css/admin-menu.css
@@ -288,6 +288,19 @@
background-size: 20px auto;
}
+#adminmenu div.wp-menu-image.svg-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+#adminmenu div.wp-menu-image.svg-icon svg {
+ width: 22px;
+ height: 22px;
+ fill: currentColor;
+ transition: color .1s ease-in-out;
+}
+
div.wp-menu-image:before {
color: #a7aaad;
color: rgba(240, 246, 252, 0.6);
@@ -295,24 +308,35 @@ div.wp-menu-image:before {
transition: all .1s ease-in-out;
}
-#adminmenu div.wp-menu-image:before {
+#adminmenu div.wp-menu-image:before,
+#adminmenu div.wp-menu-image.svg-icon svg {
color: #a7aaad;
color: rgba(240, 246, 252, 0.6);
}
#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before,
+#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image.svg-icon svg,
#adminmenu .wp-has-current-submenu div.wp-menu-image:before,
+#adminmenu .wp-has-current-submenu div.wp-menu-image.svg-icon svg,
#adminmenu .current div.wp-menu-image:before,
+#adminmenu .current div.wp-menu-image.svg-icon svg,
#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before,
+#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image.svg-icon svg,
#adminmenu a.current:hover div.wp-menu-image:before,
+#adminmenu a.current:hover div.wp-menu-image.svg-icon svg,
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
-#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before {
+#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image.svg-icon svg,
+#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
+#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image.svg-icon svg {
color: #fff;
}
#adminmenu li:hover div.wp-menu-image:before,
+#adminmenu li:hover div.wp-menu-image.svg-icon svg,
#adminmenu li a:focus div.wp-menu-image:before,
-#adminmenu li.opensub div.wp-menu-image:before {
+#adminmenu li a:focus div.wp-menu-image.svg-icon svg,
+#adminmenu li.opensub div.wp-menu-image:before,
+#adminmenu li.opensub div.wp-menu-image.svg-icon svg {
color: #72aee6;
}
@@ -323,6 +347,10 @@ div.wp-menu-image:before {
z-index: 25;
}
+.folded #adminmenu div.wp-menu-image.svg-icon {
+ height: 34px;
+}
+
.folded #adminmenu a.menu-top {
height: 34px;
}
@@ -493,6 +521,9 @@ ul#adminmenu > li.current > a.current:after {
#collapse-button .collapse-button-icon {
width: 36px;
height: 34px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
#collapse-button .collapse-button-label {
@@ -503,29 +534,25 @@ ul#adminmenu > li.current > a.current:after {
display: none;
}
-#collapse-button .collapse-button-icon:after {
- content: "\f148";
- content: "\f148" / '';
- display: block;
+#collapse-button .collapse-button-icon svg {
+ width: 22px;
+ height: 22px;
+ fill: currentColor;
position: relative;
- top: 7px;
- text-align: center;
- font: normal 20px/1 dashicons !important;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ top: -1px;
}
/* rtl:ignore */
-.folded #collapse-button .collapse-button-icon:after,
-.rtl #collapse-button .collapse-button-icon:after {
+.folded #collapse-button .collapse-button-icon svg,
+.rtl #collapse-button .collapse-button-icon svg {
transform: rotate(180deg);
}
-.rtl.folded #collapse-button .collapse-button-icon:after {
+.rtl.folded #collapse-button .collapse-button-icon svg {
transform: none;
}
-#collapse-button .collapse-button-icon:after,
+#collapse-button .collapse-button-icon svg,
#collapse-button .collapse-button-label {
transition: all .1s ease-in-out;
}
@@ -609,6 +636,10 @@ li#wp-admin-bar-menu-toggle {
z-index: 25;
}
+ .auto-fold #adminmenu div.wp-menu-image.svg-icon {
+ height: 34px;
+ }
+
.auto-fold #adminmenu a.menu-top {
min-height: 34px;
}
@@ -650,11 +681,11 @@ li#wp-admin-bar-menu-toggle {
}
/* rtl:ignore */
- .auto-fold #collapse-button .collapse-button-icon:after {
+ .auto-fold #collapse-button .collapse-button-icon svg {
transform: rotate(180deg);
}
- .rtl.auto-fold #collapse-button .collapse-button-icon:after {
+ .rtl.auto-fold #collapse-button .collapse-button-icon svg {
transform: none;
}
@@ -814,26 +845,25 @@ li#wp-admin-bar-menu-toggle {
border: 1px solid transparent;
}
- #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
- content: "\f228";
- display: inline-block;
+ #wpadminbar #wp-admin-bar-menu-toggle .ab-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
float: left;
- font: normal 40px/45px dashicons;
- vertical-align: middle;
- outline: none;
margin: 0;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
height: 44px;
width: 50px;
padding: 0;
border: none;
- text-align: center;
- text-decoration: none;
box-sizing: border-box;
}
- .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
+ #wpadminbar #wp-admin-bar-menu-toggle .ab-icon svg {
+ width: 36px;
+ height: 36px;
+ }
+
+ .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon {
color: #72aee6;
}
}
diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index 313666e3ded73..1b5812bb21a9d 100644
--- a/src/wp-admin/css/colors/_admin.scss
+++ b/src/wp-admin/css/colors/_admin.scss
@@ -259,7 +259,8 @@ input[type="radio"]:focus {
color: variables.$menu-text;
}
-#adminmenu div.wp-menu-image:before {
+#adminmenu div.wp-menu-image:before,
+#adminmenu div.wp-menu-image.svg-icon svg {
color: variables.$menu-icon;
}
@@ -272,7 +273,9 @@ input[type="radio"]:focus {
}
#adminmenu li.menu-top:hover div.wp-menu-image:before,
-#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
+#adminmenu li.menu-top:hover div.wp-menu-image.svg-icon svg,
+#adminmenu li.opensub > a.menu-top div.wp-menu-image:before,
+#adminmenu li.opensub > a.menu-top div.wp-menu-image.svg-icon svg {
color: variables.$menu-highlight-icon;
}
@@ -343,13 +346,21 @@ ul#adminmenu > li.current > a.current:after {
}
#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,
+#adminmenu li.wp-has-current-submenu div.wp-menu-image.svg-icon svg,
#adminmenu a.current:hover div.wp-menu-image:before,
+#adminmenu a.current:hover div.wp-menu-image.svg-icon svg,
#adminmenu li.current div.wp-menu-image:before,
+#adminmenu li.current div.wp-menu-image.svg-icon svg,
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
+#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image.svg-icon svg,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
+#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image.svg-icon svg,
#adminmenu li:hover div.wp-menu-image:before,
+#adminmenu li:hover div.wp-menu-image.svg-icon svg,
#adminmenu li a:focus div.wp-menu-image:before,
-#adminmenu li.opensub div.wp-menu-image:before {
+#adminmenu li a:focus div.wp-menu-image.svg-icon svg,
+#adminmenu li.opensub div.wp-menu-image:before,
+#adminmenu li.opensub div.wp-menu-image.svg-icon svg {
color: variables.$menu-current-icon;
}
@@ -419,6 +430,7 @@ ul#adminmenu > li.current > a.current:after {
color: variables.$menu-submenu-focus-text;
}
+#wpadminbar:not(.mobile) li:hover .ab-icon,
#wpadminbar:not(.mobile) li:hover .ab-icon:before,
#wpadminbar:not(.mobile) li:hover .ab-item:before,
#wpadminbar:not(.mobile) li:hover .ab-item:after,
@@ -459,11 +471,15 @@ ul#adminmenu > li.current > a.current:after {
#wpadminbar .quicklinks .menupop.hover ul li a:focus,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
+#wpadminbar li:hover .ab-icon,
#wpadminbar li:hover .ab-icon:before,
#wpadminbar li:hover .ab-item:before,
+#wpadminbar li a:focus .ab-icon,
#wpadminbar li a:focus .ab-icon:before,
#wpadminbar li .ab-item:focus:before,
+#wpadminbar li .ab-item:focus .ab-icon,
#wpadminbar li .ab-item:focus .ab-icon:before,
+#wpadminbar li.hover .ab-icon,
#wpadminbar li.hover .ab-icon:before,
#wpadminbar li.hover .ab-item:before,
#wpadminbar li:hover #adminbarsearch:before,
@@ -475,11 +491,13 @@ ul#adminmenu > li.current > a.current:after {
#wpadminbar .quicklinks li a:focus .blavatar,
#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar,
#wpadminbar .menupop .menupop > .ab-item:hover:before,
+#wpadminbar.mobile .quicklinks .hover .ab-icon,
#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
#wpadminbar.mobile .quicklinks .hover .ab-item:before {
color: variables.$menu-submenu-focus-text;
}
+#wpadminbar.mobile .quicklinks .ab-icon,
#wpadminbar.mobile .quicklinks .ab-icon:before,
#wpadminbar.mobile .quicklinks .ab-item:before {
color: variables.$menu-icon;
diff --git a/src/wp-admin/includes/options.php b/src/wp-admin/includes/options.php
index 5742e3ccc1ccc..674237b3c9cee 100644
--- a/src/wp-admin/includes/options.php
+++ b/src/wp-admin/includes/options.php
@@ -36,6 +36,7 @@ function options_general_add_js() {
' ) );
+ $this->assertStringNotContainsString( '