Community Forums › Forums › Archived Forums › Design Tips and Tricks › Simple Social Icons Broken
Tagged: add, simple social icon, strava
- This topic has 25 replies, 5 voices, and was last updated 7 years ago by Victor Font.
-
AuthorPosts
-
December 13, 2016 at 7:37 am #197507parchmentgirlMember
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.comDecember 13, 2016 at 8:37 am #197509Victor FontModeratorYou'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?December 13, 2016 at 9:06 am #197513parchmentgirlMemberYeah, 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.
December 13, 2016 at 12:40 pm #197528Victor FontModeratorI'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?December 13, 2016 at 1:27 pm #197534parchmentgirlMemberOh, 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?
December 13, 2016 at 4:02 pm #197545Victor FontModeratorThe 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?December 13, 2016 at 7:15 pm #197553parchmentgirlMemberThanks 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?
December 14, 2016 at 6:46 am #197564Victor FontModeratorYour 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?December 14, 2016 at 10:04 am #197575parchmentgirlMemberOh, 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.
December 14, 2016 at 3:01 pm #197586Victor FontModeratorYou 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?December 14, 2016 at 4:15 pm #197587parchmentgirlMemberOkay, 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.
December 15, 2016 at 7:41 am #197615Victor FontModeratorPlease 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?December 15, 2016 at 12:16 pm #197646parchmentgirlMemberWell, 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?
December 15, 2016 at 1:20 pm #197647Victor FontModeratorYou 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?December 15, 2016 at 9:36 pm #197659nangmuikrMemberHi 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 imageHere is my site: http://nangmuikimhospital.com/
Thank alot for your help <3
December 15, 2016 at 11:38 pm #197662parchmentgirlMemberIt 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.
December 17, 2016 at 10:04 am #197741parchmentgirlMemberOkay, 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>
December 17, 2016 at 12:02 pm #197743Victor FontModeratorYou 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?December 17, 2016 at 12:57 pm #197748parchmentgirlMemberI'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?
December 17, 2016 at 4:10 pm #197754Victor FontModeratorWhatever 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? -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.