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

Viewing 15 replies - 1 through 15 (of 22 total)
  • grief!

    replave should = replace

    Geoff

    no one around to help with this?!

    Cheers

    Geoff

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    First start with generating your own ‘svg-icons’ file (with your modifications): https://themes.svn.wordpress.org/twentyseventeen/1.0/assets/images/svg-icons.svg

    Andrew

    the link does not seem to work?

    Cheers

    Geoff

    this works

    https://themes.svn.wordpress.org/twentyseventeen/1.0/assets/images/

    but clicking on svg-icons.svg

    gives empty page …

    Geoff

    Andrew

    even if the link worked not clear how that helps?

    I already have .png versions of the social media icons – just don’t know how to get them to replace the current icons?

    Geoff

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’m afraid it’s a bit more complicated than substituting individual png images. The icons in the footer are implemented with SVG. The theme has a file named ‘svg-icons’ that is a compilation of all the icons on the website. You can see this when you look at the source code. You need to edit the code and replace the facebook icon with your icon.

    Andrew

    I have downloaded the svg-icons.svg file from my WordPress host but how on earth do I substitute my icons into this?!

    Cheers

    Geoff

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

    Andrew

    haev moved on a little!

    1. I have created an svg version of my facebook png using Inkscape.

    2. have looked inside the svg-icons.svg file from my wordpress host and can see that there are many different images in it, including code for the facebook image.

    3. difficulty is knowing what part of the facebook code in the svg-icons.svg file to replace with the code generated by Inkscape!? The 2 versions are not identical ….

    Geoff

    Andrew

    Which part of (b) do I take to replace which part of (a)?!

    Geoff

    (a) facebook section from svg-icons.svf

    <symbol id=”icon-facebook” viewBox=”0 0 19 32″>
    <path class=”path1″ d=”M17.125 0.214v4.714h-2.804q-1.536 0-2.071 0.643t-0.536 1.929v3.375h5.232l-0.696 5.286h-4.536v13.554h-5.464v-13.554h-4.554v-5.286h4.554v-3.893q0-3.321 1.857-5.152t4.946-1.83q2.625 0 4.071 0.214z”></path>
    </symbol>

    (b) in the svg file created from the png file by Inkscape

    <?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”?>
    <svg
    xmlns:dc=”http://purl.org/dc/elements/1.1/&#8221;
    xmlns:cc=”http://creativecommons.org/ns#&#8221;
    xmlns:rdf=”http://www.w3.org/1999/02/22-rdf-syntax-ns#&#8221;
    xmlns:svg=”http://www.w3.org/2000/svg&#8221;
    xmlns=”http://www.w3.org/2000/svg&#8221;
    version=”1.1″
    id=”svg2″
    viewBox=”0 0 744.09448819 1052.3622047″
    height=”297mm”
    width=”210mm”>
    <defs
    id=”defs4″ />
    <metadata
    id=”metadata7″>
    <rdf:RDF>
    <cc:Work
    rdf:about=””>
    <dc:format>image/svg+xml</dc:format>
    <dc:type
    rdf:resource=”http://purl.org/dc/dcmitype/StillImage&#8221; />
    <dc:title></dc:title>
    </cc:Work>
    </rdf:RDF>
    </metadata>
    <g
    id=”layer1″>
    <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″ />
    </g>
    </svg>

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Replace all of (a) with this code:

    
    <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>
    
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Then add your modified ‘svg-icons.svg’ files to your Child Theme folder.

    And in your Child Theme functions.php file (inbetween the <?php and ?> tags) add the following code:

    
    // 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 );
    

    Andrew

    many thanks – where do I put the new svg-icons.svg file, in my child theme folder or overwrite the svg-icons.svg file in themes/twentyseventeen/assets/images?

    Cheers

    Geoff

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

    sorry – I see it goes in the child folder !

    Geoff

    Andrew

    oops! have done as you suggest but with the new functions.php file the geoff-ideas.co.uk does not load – just get a blank page in the browser!

    putting the original functions.php file back and it does load ..

    any thoughts?

    Geoff

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