Support » Theme: Twenty Seventeen » how use own social media icons?

Viewing 7 replies - 16 through 22 (of 22 total)
  • 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 2 years, 6 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

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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″ />

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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

Viewing 7 replies - 16 through 22 (of 22 total)
  • The topic ‘how use own social media icons?’ is closed to new replies.