Use SVG please

Thank you for sharing this. I agree, my preference is also to use SVG instead of an icon font–here’s a link to a tutorial I’ve written on how to do that. Using an icon font instead of SVG keeps the plugin more lightweight, but I’ve intentionally made it easy to disable FontAwesome altogether so that you can use your own CSS, or (if you prefer) your own SVG.

Hi Robin,

Thanks for your answer. I’d like to have that built-in the plugin. As this is a simple plugin, it would be great if the plugin does the job best. I’m a developer and writing my own CSS with my own SVG is almost the same as re-creating the plugin again.

I can certainly look into this as a feature request for a future release. If it can be done with minimal disruption, I’m certainly willing to try it.

Hi. Where do I put the filter code in your tutorial to show the SVGs?

You can put the filter code into your theme’s functions.php file. Just please make sure your files are backed up and practice safe coding.

I did before posting here, but three-quarters of the page disappears and only the header and main menu remain. Test with MH Magazine Lite theme and see. Seems to be an error.

Have you copied over the svg code in addition to the filter? Since there are multiple ways to add SVG icons, and themes like Twenty Seventeen already have them, I only included my SVG function as an example–you either need to copy that as well or change it to your own (also make sure you have SVG icons being added to your page somehow; the tutorial assumes you have icons in hand already).

I followed this tutorial up to step 3. Does that include the svgs? https://jackiedelia.com/adding-svg-icons-graphics-wordpress-theme/. I have included the svg code in the functions php but this is the result https://prntscr.com/m7o115. I have copied the two codes on github (https://gist.github.com/robincornett/a27aa6ce24d65cd9e230d85699a0da7e#file-svg-php) in the functions.php and the css code in custom css section.

Yes, step 2 included loading the SVG file onto the site. If you’re using Jackie’s SVG icons, then you would need to change the leaven_get_svg() line to match Jackie’s function, probably something like this (not tested):

jdd_get_svg( array( 'icon' => esc_attr( $button['name'] ) ) )

If the page is displaying properly except for the new icons, that suggests that they’re not loaded, possibly. If the page is only partially loading, there is likely a PHP error (which is why I’m suspecting the missing function). If it’s the former, viewing the affected page using Dev Tools to see if the svg file you’ve uploaded is actually being loaded will help; if the latter, you may need to pull back and do some more in depth debugging.

You left a comma at the end of that code. Anyway, here is the result https://prntscr.com/m7ob4k. I am guessing some icons are not loading.

Whoops, sorry about the comma. I scanned the SVG file from the tutorial and it looks like the icons are there, but may have slightly different names. I ran into this with email, for example, as the icon is actually called envelope. So I’ve added this bit to the beginning of my filter:

$icon = $button['name'];
if ( 'email' === $icon ) {
	$icon = 'envelope-o';
}

So you could do the same with the icons in the SVG code and match them to the $button['name'] variable, and then the line with the comma would be:

jdd_get_svg( array( 'icon' => esc_attr( $icon ) ) ),

Once you get your missing icons mapped, you should just need to add in some CSS to get them sized the way you want. Hope that helps–

I have tried for days to get this to work with svgs to no avail. Or you could think about providing another plugin that uses svgs entirely?

I can look into adding SVG to this plugin as an option for a future version.

Awesome! I tried this plugin https://www.ads-software.com/plugins/gp-social-share-svg/ and maybe it can provide insight.