Rank Math Icon in Admin Bar – CSS

Hi,

#wp-admin-bar-rank-math .rank-math-icon {
  display: inline-block;
  top: 6px; <-- this line. Why?
  position: relative;
  padding-right: 10px;
}

The relative position top of 6px means the Rank Math icon is misaligned in the admin bar. What an odd CSS tweak?

Related to this, and possibly the reason you have used custom CSS to align the icon, is because you’re using your own custom SVG icon instead of a dashicon. If you’re going to do this then you need to create your icon to be identical in terms of the Dashicon grid units, as well as the baseline heights (in EM). Using relative position to adjust the baseline of an element is a schoolboy error.

Additionally, if we are using a light skin for the WP Admin, because you’re not using an icon font, the svg is white on a light background (basically invisible).

Also, in the WP Admin Menu (sidebar), you’re using an SVG icon that is rendered inside of an img tag, and again when using the Light WP theme, the icon is white on a light background (basically invisible).

These things are easy to fix with custom CSS, but it should not be necessary to use custom code for this (and it creates an unprofessional first impression).

Thanks