Simple Social Icons Broken

[parchmentgirl]

All but one of the simple social icons on my site disappeared after the last WordPress update and have not reappeared. I saw the note about the conflict with W3TotalCache, but I don't have that plugin installed and I'm running version 2.0.1 of Simple Social Icons, so it must be something else.

Any clues as to what is going on and how to fix it?

http://parchmentgirl.com

[Victor Font]

You're using something for either minifying the style sheets or concatenating them because the new style sheets for the plugin are not showing up on your site.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[parchmentgirl]

Yeah, I use WPRocket. I didn't know that would cause a problem, because it didn't before the update. I just disabled the minification/concatenating and cleared my cache, but the icons still are not showing up.

[Victor Font]

I'm still not seeing the plugin CSS on your site when I inspect element. I can see that the new style sheet is being loaded in the source code, but it's not being applied to your widget.

Ah! Here's why. You have a huge block of custom css in your header that is over writing everything from the style sheets. A lot of this custom css has to do with simple social icons. You'll have to edit all of that to fix it.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[parchmentgirl]

Oh, I didn't realize icon fonts had been depreciated in this update.

Do you know of a way to add a custom social button compatible with the update?

[Victor Font]

The StudioPress blog post announcing the release of this version has links to articles about how to customize it: http://www.studiopress.com/simple-social-icons-2-0/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[parchmentgirl]

Thanks for that link. I got icons arranged the way I want them easily enough, but I'm having a bit of trouble with adding a custom icon. I'm still a beginner with PHP and obviously, I'm doing something wrong because the code crashes my site.

This is what I have:

add_filter( 'simple_social_default_profiles', 'custom_add_new_simple_icon' );

function custom_add_new_simple_icon( $icons ) {
    $icons['Goodreads'] = [
        'label'   => __( 'Goodreads', 'simple-social-icons' ),
        'pattern' => '<li class="social-goodreads"><a href="%s" %s><svg role="img" class="social-goodreads-svg" aria-labelledby="social-goodreads"><title id="social-goodreads">' . __( 'Goodreads', 'simple-social-icons' ) . '</title><use xlink:href="' . esc_url( plugin_dir_url(__~/Downloads/goodreads-letter-logo.svg__) . 'my.svg#social-goodreads' ) . '"></use></svg></a></li>',
    ];

    return $icons;
}

I uploaded the SVG file to my theme's images folder and tried linking to the URL and local file, both to no avail.

Can you tell me what I'm missing here?

[Victor Font]

Your code is looking for the image in plugin_dir_url (plugin directory). The instructions in the post say:

Update: 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

You need to change this part of the code to reflect the directory where the image is stored. You also need to look at the way you have the filename written. The way you have it, it's looking for a file named goodreads-letter-logo.svg__my.svg#social-goodreads

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[parchmentgirl]

Oh, I see. Okay, so with the code below the functions.php file updates without crashing my site and the space to add in a Goodreads link appears in the Simple Social Icons widget dashboard, but the icon itself is invisible. It links to Goodreads just fine, but I can't see the icon.

This is the code I have:

add_filter( 'simple_social_default_profiles', 'custom_add_new_simple_icon' );

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

    return $icons;
}

I placed the icon in the SVG folder in plugin>simple social icons directory where all the other simple social icons are.

[Victor Font]

You still don't have the file name correct.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[parchmentgirl]

Okay, after comparing my code to other snippets that use plugin_dir_url I thought I saw how the link was improperly formatted. I edited it to this...

<use xlink:href="' . esc_url( plugin_dir_url(__FILE__) . '/goodreads.svg#social-goodreads' ) . '"></use>

...but it still doesn't work. I also tried /goodreads.svg#goodreads, /icons/goodreads.svg#social-goodreads, and /icons/goodreads.svg#goodreads.

Can you clue me into exactly what I'm doing wrong? I'm clearly not seeing where the error is.

[Victor Font]

Please post the XML for your svg file. You SVG file is supposed to look like 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>

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[parchmentgirl]

Well, that would explain why I was confused. My SVG file is just an image I downloaded from the Flaticon database. I can't open it because I don't have Adobe Illustrator. I just assumed I could upload the .svg image file and it would work. Is there another way to extract the XML without Illustrator?

[Victor Font]

You could try something like this: http://image.online-convert.com/convert-to-svg

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[nangmuikr]

Hi guys,
I have a wordpress site about Cosmetics. I wanna change an icon in header but I can't find where to change the icon image

Here is my site: http://nangmuikimhospital.com/

Thank alot for your help <3

[parchmentgirl]

It looks like you're using the Avada theme, which is not a Genesis theme. You might want to try the Theme Fusion community forum or fill out a ticket with ThemeFusion support.

https://theme-fusion.com/support/forum/

[parchmentgirl]

Okay, I figured out how to extract the XML from the .svg file. It looked very different from the formatting mentioned in the tutorial, so I edited it to match. This is what I have:

<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=“goodreads” viewBox="0 0 335.08 335.079">
            <title>Goodreads</title>
            <path d="M311.175,115.775c-1.355-10.186-1.546-27.73,7.915-33.621c0.169-0.108,0.295-0.264,0.443-0.398
			c7.735-2.474,13.088-5.946,8.886-10.618l-114.102-34.38L29.56,62.445c0,0-21.157,3.024-19.267,35.894
			c1.026,17.89,6.637,26.676,11.544,31l-15.161,4.569c-4.208,4.672,1.144,8.145,8.88,10.615c0.147,0.138,0.271,0.293,0.443,0.401
			c9.455,5.896,9.273,23.438,7.913,33.626c-33.967,9.645-21.774,12.788-21.774,12.788l7.451,1.803
			c-5.241,4.736-10.446,13.717-9.471,30.75c1.891,32.864,19.269,35.132,19.269,35.132l120.904,39.298l182.49-44.202
			c0,0,12.197-3.148-21.779-12.794c-1.366-10.172-1.556-27.712,7.921-33.623c0.174-0.105,0.301-0.264,0.442-0.396
			c7.736-2.474,13.084-5.943,8.881-10.615l-7.932-2.395c5.29-3.19,13.236-11.527,14.481-33.183
			c0.859-14.896-3.027-23.62-7.525-28.756l15.678-3.794C332.949,128.569,345.146,125.421,311.175,115.775z M158.533,115.354
			l30.688-6.307l103.708-21.312l15.451-3.178c-4.937,9.036-4.73,21.402-3.913,29.35c0.179,1.798,0.385,3.44,0.585,4.688
			L288.14,122.8l-130.897,32.563L158.533,115.354z M26.71,147.337l15.449,3.178l99.597,20.474l8.701,1.782l0,0l0,0l26.093,5.363
			l1.287,40.01L43.303,184.673l-13.263-3.296c0.195-1.25,0.401-2.89,0.588-4.693C31.44,168.742,31.651,156.373,26.71,147.337z
			 M20.708,96.757c-0.187-8.743,1.371-15.066,4.52-18.28c2.004-2.052,4.369-2.479,5.991-2.479c0.857,0,1.474,0.119,1.516,0.119
			l79.607,25.953l39.717,12.949l-1.303,40.289L39.334,124.07l-5.88-1.647c-0.216-0.061-0.509-0.103-0.735-0.113
			C32.26,122.277,21.244,121.263,20.708,96.757z M140.579,280.866L23.28,247.98c-0.217-0.063-0.507-0.105-0.733-0.116
			c-0.467-0.031-11.488-1.044-12.021-25.544c-0.19-8.754,1.376-15.071,4.519-18.288c2.009-2.052,4.375-2.479,5.994-2.479
			c0.859,0,1.474,0.115,1.519,0.115c0,0,0.005,0,0,0l119.316,38.908L140.579,280.866z M294.284,239.459
			c0.185,1.804,0.391,3.443,0.591,4.693l-147.812,36.771l1.292-40.01l31.601-6.497l4.667,1.129l17.492-5.685l80.631-16.569
			l15.457-3.18C293.261,219.146,293.466,231.517,294.284,239.459z M302.426,185.084c-0.269,0.006-0.538,0.042-0.791,0.122
			l-11.148,3.121l-106.148,29.764l-1.298-40.289l34.826-11.359l84.327-27.501c0.011-0.005,4.436-0.988,7.684,2.315
			c3.144,3.214,4.704,9.537,4.52,18.28C313.848,184.035,302.827,185.053,302.426,185.084z"/>
        </symbol>
    </defs>
</svg>

Does this look right to you? And in the following code, do I insert the XML in the place of FILE or in the place of my.svg?

<use xlink:href="' . esc_url( plugin_dir_url(__FILE__) . 'my.svg#goodreads' ) . '"></use></svg></a></li>

[Victor Font]

You would save the image as goodreads.svg and the substitute my.svg#goodreads with goodreads.svg#goodreads.

The file your produced is going to give you an error. You the id="goodreads" wrapped in curly quotes. These need to be straight quotes.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[parchmentgirl]

I'm confused. This is copied and pasted directly from the tutorial with no changes to the quotes:

add_filter( 'simple_social_default_profiles', 'custom_add_new_simple_icon' );

function custom_add_new_simple_icon( $icons ) {
    $icons[‘Goodreads’] = [
        'label'   => __( ‘Goodreads’, 'simple-social-icons' ),
        'pattern' => '<li class="social-goodreads”><a href="%s" %s><svg role="img" class="social-goodreads-svg" aria-labelledby="social-goodreads”><title id="social-goodreads”>’ . __( ‘Goodreads’, 'simple-social-icons' ) . '</title><use xlink:href="' . esc_url( plugin_dir_url(__FILE__) . ‘goodreads.svg#goodreads’ ) . '"></use></svg></a></li>',
    ];

    return $icons;
}

Also, where in the PHP is the XML supposed to be placed?

[Victor Font]

Whatever you copied is full of curly quotes. Curly quotes break PHP. You don't copy the XML into PHP. You save it in the directory referenced in the code. Perhaps you should consider paying somebody to do this for you?

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts