I’ve been working on updating some projects to use SVG icons instead of icon fonts and CSS pseudo elements. Several weeks ago, SVG icons came to SuperSide Me, and I’ve been working to add the same to my starter theme and my own personal theme. I also want to use SVG icons in Scriptless Social Sharing, but without completely changing that plugin. It’s involved work on both ends to keep things efficient, as in not loading icon fonts multiple times, and the same with SVG icons.
My plugins which use Font Awesome have always included a setting to not load the plugin copy of Font Awesome, because you may already be loading it using their CDN, or in your theme, or through a plugin. Or who knows, you may have wanted to use your own icon font, and I have not wanted to get in your way. This setting makes it pretty easy to transition to SVG icons, if you so choose.
With my own theme transition to SVG icons, I’ve been working to use them everywhere I need icons–in navigation, search, social menus, and now, my social sharing buttons. I don’t really want to go into how I’ve added the icons to my theme–it’s based off of this excellent tutorial on SVG icons from Jackie D’Elia, which I believe she based on the work done in the Twenty Seventeen default theme.
get_svg function introduced in Twenty Seventeen; you are welcome to use my method (gist). If you use this tutorial with the Twenty Seventeen method, note that the name of the icon has to be passed to the function as part of an array, rather than how I do mine as just a string (I use leaven_get_svg( 'wordpress' ); Jackie’s version would be jdd_get_svg( array( 'icon' => 'wordpress' ).Once you have your icons in your theme, let’s talk about how to swap them out in Scriptless Social Sharing. You’ll need to make some changes to your plugin settings:
- First, make sure you’re using the latest version of the plugin (currently 2.1.0), because a filter on the button link markup has been added
- On the plugin settings page, uncheck the two Font Awesome settings
Then, you’ll just want to use this filter to modify the Scriptless link markup:
What this code is doing is completely replacing the link markup for each button. It’s actually exactly what the plugin is already doing for the markup, but I’m inserting the icon before the social network name.
To finish this out, I just wanted to add a little bit of space between the icon and the network name, so I added this to my style.css:
| .sss-name { | |
| margin-left: 12px; | |
| } |
Since the name is visually hidden on mobile, the margin disappears with it, so the icon is centered.
There is more going on in the theme than I’ve posted here–I’m loading my SVG icons in the wp_footer hook, the same as Jackie and Twenty Seventeen, so you don’t need me to repeat that code. In my own theme, I’m using Font Awesome Pro, so I’m disabling the SuperSide Me SVG icons.
Overall, although there have been some challenges, I’m really loving the transition to SVG icons.
Photo credit: Toa Heftiba
Leave a Reply