Social Icons in Sparkling 2.0

After updating to 2.0, all social Icons just disappeared and I cannot find where to configure them. I can see all the configuration options moved to “Appearance -> Customize” but in the “Social” section there is no way to configure the links to the social networks.

Am I doing anything wrong?

Cheers

In this version we switched to a better solution for social menus. Now you can use a regular WordPress menu via Appearance >> Menus. There create a menu with social links to Facebook, Twitter, Youtube and son on inside it. Menu will recognize what URL you are using and will use the right icon for it.

Afterwards you can enable/disable icon in footer by using your mentioned function in customizer or by using the good old Sparkling social widget.

But how do we do for widgets ?

OK, used the Menu and it works for the social links, but if I want the links (in my case Facebook, Youtube and some other) to start up in a new browser window, and not replace my site - how to do that with menu?

@angristan

Use the good old Sparkling Social Widget but before that make sure that you have created and assigned Social Menu like described above.

@mikael

When you open WordPress menu editor via Appearance >> Menus you should go to Screen Options in the upper right corner. There you should select option called “Link Target”.
Afterwards you will have a new options for menu items named “Open link in a new window/tab”. Select that for each menu item and you are good to go.

So I have to create a menu with social links and then assign it where ?

Set menu location as “Social Links”. A single checkbox when creating menu.

Thanks Aigars, that worked perfectly!

Hello Aigars,

After I updated the Sparkling theme, I had the same problem as @mikael, the social icons disappeared, but I followed your instructions and now they work perfectly. Thank you so much! :slight_smile:

However, there is something I want to ask you. For the social icons, I changed the background color a while back, by adding custom CSS codes, just like you explained here:

https://colorlibsupport.com/t/editting-social-icons/

But now after the theme was updated, my social icons have again the default color (that light gray), even if I still have the color codes in Theme Options - Other - Custom CSS. What can I do to make my social icons have again different background colors?

Thank you in advance for your help!

Have a great Sunday,
Cristina

It works but I don’t have the icon : https://lut.im/I5VacXcDMQ/OwE7cIXmeQMMvP8C.PNG

In my menu, I have to put custom links, and what title for those links ?

@angristan

Clean your website and browser cache. If you are using CDN then purge its cache too. Icos works perfectly well but you still have a cached version somewhere.

Really ? :frowning:
What do you see on angristan.fr ?

Make sure to take font-awesome.css file from the latest theme version. You still have the previous one.

The old one: angristan.fr/wp-content/themes/sparkling/inc/css/font-awesome.min.css

In the next update we will move some CSS code from font-awesome.min.css to style.css but for now you need to update that Font Awesome library.

Well, this is the latest version…

Nope, it’s not the latest version as these lines are missing:

#menu-social li, #menu-social ul {
    border: 0!important;
    list-style: none;
    padding-left: 0;
}
#menu-social li a[href*="twitter.com"] .fa:before,.fa-twitter:before{content:"\f099"}
#menu-social li a[href*="facebook.com"] .fa:before,.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}
#menu-social li a[href*="github.com"] .fa:before,.fa-github:before{content:"\f09b"}
#menu-social li a[href*="/feed"] .fa:before,.fa-rss:before{content:"\f09e"}
#menu-social li a[href*="dribbble.com"] .fa:before, .fa-dribbble:before {content: "\f17d"}
#menu-social li a[href*="skype.com"] .fa:before, .fa-skype:before {content: "\f17e"}
#menu-social li a[href*="foursquare.com"] .fa:before, .fa-foursquare:before {content: "\f180"}
#menu-social li a[href*="spotify.com"] .fa:before, .fa-spotify:before {content: "\f1bc"}
#menu-social li a[href*="soundcloud.com"] .fa:before, .fa-soundcloud:before {content: "\f1be"}
#menu-social li a[href*="vimeo.com"] .fa:before, .fa-vimeo-square:before {content: "\f194"}
#menu-social li a[href*="youtube.com"] .fa:before, .fa-youtube:before {content: "\f167"}
#menu-social li a[href*="instagram.com"] .fa:before, .fa-instagram:before {content: "\f16d"}
#menu-social li a[href*="flickr.com"] .fa:before, .fa-flickr:before {content: "\f16e"}
#menu-social li a[href*="tumblr.com"] .fa:before, .fa-tumblr:before {content: "\f173"}
#menu-social li a[href*="pinterest.com"] .fa:before, .fa-pinterest:before {content: "\f0d2"}
#menu-social li a[href*="plus.google.com"] .fa:before, .fa-google-plus:before {content: "\f0d5"}
#menu-social li a[href*="linkedin.com"] .fa:before, .fa-linkedin:before {content: "\f0e1"}

#menu-social li a span {
    display: none;
}

This one is good ? https://github.com/puikinsh/Sparkling/blob/master/inc/css/font-awesome.min.css

What to do now ? https://lut.im/Alqt4oTBhv/7uwZUHK3N5oFmjAj.PNG

@angristan

These lines are now missing from style.css:

#menu-social li a span {
    display: none;
}

How did you performed this update as it appears that files weren’t changed as they should be?

Okay, it works! :slight_smile:

Is it possible to get icons for picasa and last.fm?