Use SVG Icons for Scriptless Social Sharing Buttons

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/robincornett.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/robincornett.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/robincornett.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 29 in /home/customer/www/robincornett.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 31 in /home/customer/www/robincornett.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 32 in /home/customer/www/robincornett.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/robincornett.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 558

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/robincornett.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 558

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/robincornett.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 558

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 29 in /home/customer/www/robincornett.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 558

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 31 in /home/customer/www/robincornett.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 558

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 32 in /home/customer/www/robincornett.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 558

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/robincornett.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/robincornett.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/robincornett.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 29 in /home/customer/www/robincornett.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 31 in /home/customer/www/robincornett.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 32 in /home/customer/www/robincornett.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

This tutorial is no longer needed as of Scriptless Social Sharing 3.0, which added SVG icons directly to the plugin.

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.

Note: I’ve modified the 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:

	add_filter( 'scriptlesssocialsharing_link_markup', 'leaven_modify_scriptless_link_markup', 10, 2 );
	/**
	* Add SVG icons to Scriptless sharing buttons.
	*
	* @param $output
	*
	* @param $button
	*
	* @return string
	*/
	function leaven_modify_scriptless_link_markup( $output, $button ) {
	return sprintf( '<a class="button %s" target="_blank" href="%s" rel="noopener" %s>%s<span class="sss-name">%s</span></a>',
	esc_attr( $button['name'] ),
	esc_url( $button['url'] ),
	$button['data'],
	leaven_get_svg( $button['name'] ),
	$button['label']
	);
	}

view raw plugins-scriptlesssocialsharing.php hosted with ❤ by GitHub

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;
	}

view raw style.css hosted with ❤ by GitHub

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

Do something awesome. Tell a friend:

Twitter Facebook Pinterest Email Pocket

Create a Gravity Form for Two Users

Defining Editor Font Sizes in the Block Editor

Notes on Working with Custom Colors in the WordPress Block Editor

Remove Time from Comments in Genesis

Use SVG Icons for Scriptless Social Sharing Buttons

You May Also Like:

Do something awesome. Tell a friend:

Reader Interactions

Leave a Reply Cancel reply