Add an additional icon in version 2.0

Nick Cernis edited this page Jun 13, 2017 · 10 revisions

A working sample plugin that shows how to add icons is available here:

https://github.com/nickcernis/ssi-custom-icons


To add an additional SVG icon in Simple Social Icons 2.0+, you can use this code:

add_filter( 'simple_social_default_profiles', 'custom_add_new_simple_icon' );

function custom_add_new_simple_icon( $icons ) {
	$icons['my-new-icon'] = [
		'label'   => __( 'My New Icon URI', 'simple-social-icons' ),
		'pattern' => '<li class="social-my-new-icon"><a href="%s" %s><svg role="img" class="social-my-new-icon-svg" aria-labelledby="social-my-new-icon"><title id="social-my-new-icon">' . __( 'My new icon', 'simple-social-icons' ) . '</title><use xlink:href="' . esc_url( plugin_dir_url(__FILE__) . 'my.svg#social-my-new-icon' ) . '"></use></svg></a></li>',
	];

	return $icons;
}

add_filter( 'simple_social_default_styles', 'custom_add_new_icon_default' );

function custom_add_new_icon_default( $defaults ) {
	$defaults['my-new-icon'] = '';

	return $defaults;
}

You'll need to update:

  • 'My New Icon URI' to the label you would like to use in the widget settings.
  • 'social-my-new-icon' to the class you want to use to identify the SVG (it should begin social-).
  • 'My new icon' to the screen reader text to use.
  • plugin_dir_url(__FILE__) . 'my.svg#social-my-icon to the path of your SVG file, where social-my-icon is the ID of the icon in the SVG file, as shown below. (If you're adding this code to your child theme and not to a site-specific plugin, you'll need to replace plugin_dir_url with get_stylesheet_directory_uri.)

SVG file format

The above assumes an SVG file format such as this:

<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <defs>
        <symbol id="social-my-icon" viewBox="0 0 32 32">
            <title>My new icon</title>
            <path d="M24,21.714c0.953,0 1.762,0.333 2.429,1c0.667,0.667 1,1.476 1,2.429c0,0.953 -0.333,1.762 -1,2.429c-0.667,0.667 -1.476,1 -2.429,1c-0.953,0 -1.762,-0.333 -2.429,-1c-0.667,-0.667 -1,-1.476 -1,-2.429c0,-0.953 0.333,-1.762 1,-2.429c0.667,-0.667 1.476,-1 2.429,-1ZM26.196,12.571c0.333,-0.024 0.619,0.077 0.857,0.304c0.25,0.214 0.375,0.494 0.375,0.839l0,2.411c0,0.297 -0.098,0.553 -0.295,0.768c-0.197,0.215 -0.444,0.334 -0.741,0.357c-2.726,0.262 -5.056,1.36 -6.991,3.295c-1.935,1.935 -3.033,4.265 -3.295,6.991c-0.024,0.297 -0.143,0.544 -0.357,0.741c-0.214,0.197 -0.47,0.295 -0.768,0.295l-2.411,0c-0.345,0 -0.625,-0.125 -0.839,-0.375c-0.203,-0.203 -0.304,-0.459 -0.304,-0.768l0,-0.089c0.155,-1.905 0.634,-3.726 1.438,-5.464c0.804,-1.738 1.884,-3.28 3.241,-4.625c1.345,-1.357 2.887,-2.438 4.625,-3.241c1.738,-0.803 3.559,-1.283 5.464,-1.438l0.001,-0.001ZM26.232,3.429c0.321,-0.024 0.601,0.083 0.839,0.321c0.238,0.214 0.357,0.488 0.357,0.821l0,2.554c0,0.309 -0.104,0.574 -0.313,0.795c-0.209,0.221 -0.462,0.337 -0.759,0.348c-2.559,0.143 -4.991,0.744 -7.295,1.804c-2.304,1.06 -4.304,2.438 -6,4.134c-1.696,1.696 -3.074,3.696 -4.134,6c-1.06,2.304 -1.667,4.736 -1.821,7.295c-0.012,0.297 -0.128,0.55 -0.348,0.759c-0.22,0.209 -0.479,0.313 -0.777,0.313l-2.554,0c-0.333,0 -0.607,-0.119 -0.821,-0.357c-0.214,-0.214 -0.321,-0.476 -0.321,-0.786l0,-0.054c0.155,-3.119 0.869,-6.104 2.143,-8.955c1.274,-2.851 3.024,-5.383 5.25,-7.598c2.214,-2.226 4.747,-3.976 7.598,-5.25c2.851,-1.274 5.836,-1.988 8.955,-2.143l0.001,-0.001Z" />
        </symbol>
    </defs>
</svg>

If your icon doesn't take the default colour of the rest of the icons, make sure the path element in your SVG file does not contain inline styles.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.