Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Need to add retina ready icon for plugin WordPress

  • SOLVED

I've been searching and trying methods for awhile, and have come to realize that creating a retina ready WordPress admin icon is a royal pain. I have a custom plugin and I need to add the icon for it. I've tried using base64 but that still doesn't adjust for retina. Some plugins like Yoast are using SVG and others are using sprites. Can anyone give me the exact steps on how to implement? Thanks a million!

Answers (3)

2018-05-22

Reigel Gallarde answers:

if you mean the dashicons on the admin dashboard, svg is the best option in my opinion.

Here's how to create one:
https://make.wordpress.org/design/dashicons-style-guide/


Reigel Gallarde comments:

this too, would help if you have your svg already.
https://blog.damirmiladinov.com/wordpress/custom-dashicons.html


Reigel Gallarde comments:

Hi Kyler,

May I know why is this not helpful?
If you have setup your custom dashicons as font using svg, it should be retina ready.

Let me know.


Kyler Boudreau comments:

Reigel,

I was wrong = you did give more information than I thought. I'll send this your way. Thanks!

2018-05-22

Arnav Joy answers:

Can you let me know where to integrate it ?


Kyler Boudreau comments:

Arnav - thanks for offering. The server it's on isn't accessible. I need to just get the instructions and implement on my end. Can you do that? Everyone here is missing the mark. Getting the right type of image isn't a problem. I've put PNG all the way to Base64 into the admin menu. What i don't know how to do is make it work with retina.

2018-05-22

Cesar Contreras answers:

You can use https://glyphter.com/ for SVG images to create your icon with an svg image and display it as an integrated WP icon.
only Drag and drop you SVG in to the slot and choose name for the icon, download and save the css and fonts folders in to your plugin root dir, and register our new style for add your icon like it is a built in icon.