how use own social media icons?

Andrew

just a thought – do I simply add the code to the functions.php folder or replace what is already there?

I replaced what is there – perhaps this is why the page didn’t load?

Cheers

Geoff

• This reply was modified 7 years, 10 months ago by gcwp.

Andrew

have just tried adding the code after the current code in the functions.php file but again the site will not load !?

Geoff

I made a mistake in the code, which I’ve now corrected. I meant to recommend adding this code to your Child Theme functions.php file rather than replacing the code that is already there:

// Remove the parent theme 'svg-icons.svg' file
remove_action( 'wp_footer', 'twentyseventeen_include_svg_icons', 9999); 

/**
 * Add the Child Theme 'svg-icons.svg' file
 */
function twentyseventeen_child_include_svg_icons() {
	// Define SVG sprite file.
	$svg_icons = get_stylesheet_directory_uri() . 'svg-icons.svg';

	// If it exists, include it.
	if ( file_exists( $svg_icons ) ) {
		require_once( $svg_icons );
	}
}
add_action( 'wp_footer', 'twentyseventeen_child_include_svg_icons', 9999 );

Thanks Andrew – will give it a go.

Cheers

Geoff

Andrew

Made the changes but the new facebook icon does not appear. Will check all again.

You have said use this to replace the origina; facebook section in the svg-icons.svg file;

<symbol id=”icon-facebook” viewBox=”0 0 19 32″>
<path class=”path1″ d=”m 334.15144,804.98346 c -5.3195,-2.57178 -5.48595,-4.88918 -5.12286,-71.32086 l 0.34639,-63.37537 2.84722,-2.84643 2.84722,-2.84643 64.93056,0 64.93055,0 2.84722,2.84643 2.84723,2.84643 0.34639,63.37537 c 0.23944,43.80794 -0.0761,64.39536 -1.02199,66.67892 -0.7526,1.81695 -2.76307,3.93901 -4.4677,4.7157 -4.17226,1.90101 -127.38871,1.8318 -131.33023,-0.0738 z m 69.59853,-49.76409 0,-18.75 5.55123,0 c 3.05317,0 5.83193,-0.45419 6.17502,-1.00931 0.34308,-0.55513 1.01125,-3.93013 1.48481,-7.5 l 0.86102,-6.49069 -7.03604,0 -7.03604,0 0,-5.375 c 0,-6.75434 1.62066,-8.375 8.375,-8.375 l 5.375,0 0,-6.875 0,-6.875 -8.18707,0 c -14.44615,0 -19.31293,4.86677 -19.31293,19.31292 l 0,8.18708 -5,0 -5,0 0,7.5 0,7.5 5,0 5,0 0,18.75 0,18.75 6.875,0 6.875,0 0,-18.75 z” style=”fill:#000000″></path>
</symbol>

From the Inkscape conversion you take the section starting d= but where does this part come from? <symbol id=”icon-facebook” viewBox=”0 0 19 32″><path class=”path1″

Geoff

<path
id=”path3347″
d=”m 334.15144,804.98346 c -5.3195,-2.57178 -5.48595,-4.88918 -5.12286,-71.32086 l 0.34639,-63.37537 2.84722,-2.84643 2.84722,-2.84643 64.93056,0 64.93055,0 2.84722,2.84643 2.84723,2.84643 0.34639,63.37537 c 0.23944,43.80794 -0.0761,64.39536 -1.02199,66.67892 -0.7526,1.81695 -2.76307,3.93901 -4.4677,4.7157 -4.17226,1.90101 -127.38871,1.8318 -131.33023,-0.0738 z m 69.59853,-49.76409 0,-18.75 5.55123,0 c 3.05317,0 5.83193,-0.45419 6.17502,-1.00931 0.34308,-0.55513 1.01125,-3.93013 1.48481,-7.5 l 0.86102,-6.49069 -7.03604,0 -7.03604,0 0,-5.375 c 0,-6.75434 1.62066,-8.375 8.375,-8.375 l 5.375,0 0,-6.875 0,-6.875 -8.18707,0 c -14.44615,0 -19.31293,4.86677 -19.31293,19.31292 l 0,8.18708 -5,0 -5,0 0,7.5 0,7.5 5,0 5,0 0,18.75 0,18.75 6.875,0 6.875,0 0,-18.75 z”
style=”fill:#000000″ />

I’m not sure what you mean by where it comes from. I took it from the ‘(a)’ code and replaced the facebook icon.

I saved the code you gave me (and fixed the speech marks) and the image generated has a lot of white space: https://jsfiddle.net/27drnsf4/ – I would recommend removing that whitespace using an SVG-optimisation tool that you can find from Google.

But
Would it be easier to style the icons that are already there? SVG is flexible and we can help you get the icons looking the way you want. For example, to get the Facebook icon looking like the code you’ve provide try the following CSS:

.social-navigation .menu-item-744 a {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #000;
}

Andrew

the style css is so much better!

Many thanks!

Geoff