Simple Social Icons is one of the most popular plugins we have built at StudioPress, and it’s currently active on more than 200,000 websites. With this plugin, you can easily choose which profiles to link to, customize the color and size of your icons, as well as align them to the left, center, or right—all from the widget form, with no settings page necessary.
We are on the verge of pushing out version 2.0, which is a significant update. Props to Lauren Mancke for her work on integrating the SVGs and Nick Cernis for his work on reviewing the update and providing the snippets below.
Here are three important changes, which we wanted to share with you ahead of time:
- Simple Social Icons 2.0 now uses scalable vector graphics (SVGs) instead of web fonts for better accessibility and legibility.
- We’ve added icons for Behance, Medium, Periscope, Phone, Snapchat, and Xing and also updated the icons for Instagram, Google+, and YouTube.
- We’re deprecating the simple_social_default_glyphs filter, which some developers currently use to change the order or style of icons. If you’re using that filter, check out the snippets below to see what you’ll need to use instead.
The move to SVG
Web fonts are great for rendering text, but using them for icons is a suboptimal approach. Tyler Sticka, Sara Soueidan, Chris Coyier, and other friendly faces in the web community have long been championing SVGs as an alternative that brings improved appearance and accessibility.
The new icons in Simple Social Icons 2.0 are crisper, and they’ll now appear for dyslexic visitors and other users who override their default browser fonts. Here are a few good resources about the benefits to using SVGs and how to implement them in your own projects:
- Don’t Use Icon Fonts — Tyler Sticka
- CSS vs SVG — Sara Soueidan
- Icon Fonts vs SVG — Chris Coyier
Deprecating a filter
The simple_social_default_glyphs filter allowed developers to modify the order and content of icons. We are deprecating this filter as part of the update. If you use the filter in your themes and plugins, you’ll need to update your code to change or rearrange icons once 2.0 is released.
These snippets from the plugin’s public GitHub wiki may help as starting points:
Updated 3:00 CST 12/1
Based on a suggestion from Robin Cornett, we have renamed the simple_social_default_css filter to simple_social_default_stylesheet to avoid significant styling issues that may take place with old style sheets being loaded.
Props to Gary Jones on his suggestions/code to improve the accessibility of the SVG icons.
We hope that you enjoy the new version of Simple Social Icons!