Retina Plus Social Icons

Yet another social icons widget, but with a twist.

On the newest Apple devices icons and logos can get blurry as a result of Apple’s retina display. Other vendors are also getting into the act with their own HD displays. Sending double sized images or special images just for high pixel density displays is usually the approach used to keep logos and icons sharp.

However, Ivan Drinchev has developed a font of social icons called Mono Social Icons Fonts This plugin lets users leverage this font to create clear, crisp social icons easily, without images.

Updated: Now includes a sharebar!

Usage:

Install the plugin and configure it in its options page at Settings -> Retina Ready Social Icons. You can choose icons with round or squared backgrounds or just the icon alone and choose a color to match your theme.

Put the icons in your site with a shortcode: [retina-social-icons] or with a widget, or with a function in your theme code:

<?php if(function_exists('retina_social_icons') ) {echo retina_social_icons(); } ?>

Advanced Usage:

Each icon link has its own ID so you can further change the size or color of each individual icon using your stylesheet.

I’ve added configurations for what IMHO are the most popular social networks. The font has more icons, but trying to add them all to the UI would have been quite a task.

If I haven’t added your favorite network, and I get enough requests, I’ll add that one to the next version. Tell me about it in the comments.

Icon links have been optimized for SEO with title tags and target text. Tested in WordPress version 4.

Let me know of any browsers that don’t support this font. Tested in Firefox and Chrome.

Update Sept. 29th 2014

Updated script to eliminate fout (flash of unstyled text). Delete and replace with new version.

Updated July. 24th 2015

Now includes a sharebar for social sharing! You can add the sharebar above or below the content in posts or pages.

Basic functionality for now, but will soon add ability to exclude by ID.

View Comments

Leave a Reply