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).


Viewing 3 replies - 1 through 3 (of 3 total)
  • Hello,

    Thank you for contacting Rank Math and sorry for any inconvenience that might have been caused due to that.

    We really appreciate your feedback and valuable suggestions. I have just passed this on to our dev team and hope that these changes will be included in the upcoming updates.

    Feel free to reach out to us for any other comments, questions and suggestions.

    Thank you.


    Thanks Michael

    Hello Guy,

    Thank YOU 🙂

    Appreciate the input.

Viewing 3 replies - 1 through 3 (of 3 total)

The ticket ‘Rank Math Icon in Admin Bar – CSS’ is closed to new replies.