Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve the rendering of the icon used in the admin menu & admin bar #11

wants to merge 4 commits into from


Copy link

KZeni commented May 14, 2019

As mentioned via #9 (comment), I've investigated a way to have it keep the opacity values for different parts of the icon and also retain the dynamic coloring of the icon per the icon color that's set for both the admin bar & admin menu (on site admin & front-end pages). I even got it to keep the shadow as black if that's desired in the full icon implementation.

First, I converted the original SVG into an icon font using, and this supports multiple glyphs in icons so that was then used moving forward for all of this. The export of the IcoMoon font is available here: Additional info/etc. can be provided as needed.

I then implemented the multi-glyph icon for the admin bar to be the ideal setup (it even keeps the shadow as black while the rest changes based on the icon color). However, the admin menu doesn't have enough selectors to use the glyph-based setup so I implemented that using the previous inline SVG setup since that did work fine & it has better handling of the varying opacity on elements. It might be good to revisit this to make it so the inline SVG is replaced with the glyph-based icon when it's possible (let me know if I actually overlooked how it would be now).

KZeni added 4 commits May 14, 2019
…of the font (which had rendering shortcomings)

Using a basic font (which this was set to use) lacks the opacity differentiation of elements in the icon we want, and the admin menu doesn't have enough selectors available for the icon to implement the multi-glyph icon like the admin bar does. The next best thing (in terms of rendering quality and feasibility) is to use the SVG inline.
…hanced icon

This new icon allows the admin bar's icon to have opacity for the different icon elements while keeping the font color. Also, this allows for the shadow to always be black for the box (is manually set & doesn't inherit the icon font's overall color).
…tiple colors/opacity to be used for the one icon.

This comment has been minimized.

Copy link

maxicus commented Jun 4, 2019

We will keep things similar to WordPress core, and since font icon is used there. That way it's better compatible with future WordPress updates.

Looks like shadows can't be implemented in this mode without all those hacks, so we will leave icon without shadows.

If you want to change icon so it looks better with actual code (i.e. make it nicer without shadow) - you are welcome.

@maxicus maxicus closed this Jun 5, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
2 participants
You can’t perform that action at this time.