Change the icons of the social media in superfly menu

Support
#1

How could be possible to change the default icons of the social media that appears in the superfly menu with anothers icons from fontawesome ( or using custom icons )? thanks

#2

Hi there,

If you want to use the Font Awesome icons you can add the CSS code below to X > Theme Options > CSS:

#sfm-sidebar .sfm-social li.sfm-icon-facebook a:before {
  content: "\f09a";
  font-family: fontawesome;
}

#sfm-sidebar .sfm-social li.sfm-icon-twitter a:before {
  content: "\f099";
  font-family: fontawesome;
}

#sfm-sidebar .sfm-social li.sfm-icon-youtube a:before {
  content: "\f167";
  font-family: fontawesome;
}

#sfm-sidebar .sfm-social li.sfm-icon-linkedin a:before {
  content: "\f0e1";
  font-family: fontawesome;
}

#sfm-sidebar .sfm-social li.sfm-icon-gplus a:before {
  content: "\f0d5";
  font-family: fontawesome;
}

#sfm-sidebar .sfm-social li.sfm-icon-instagram a:before {
  content: "\f16d";
  font-family: fontawesome;
}

I obtained all those unicode characters such as f09a from the fontawesome website:

https://fontawesome.com/icons/facebook?style=brands

Thank you.

#3

Perfect it works @christopher.amirian

Could be used a custom icon using the alternative way to upload icons http://superfly.looks-awesome.com/docs/Customize/Upload_Your_Icons using

1Upload your file to b64.io.

2Hit Link and you’ll be redirected to the next page.
3Copy full code generated in address bar of your browser.
4Return to Superfly admin area and paste code to specific field of Icon Library.

or if this way does not work , how could be uploaded the custom icon . thanks

#4

Hi There,

You can simply upload your icons to the WordPress media manager and then copy the link and follow the guide above as well.

content: url(path.to/image.jpg);

Hope that helps.
Thanks!

#5

How could be possible to avoid the opening a new page and open it in the same window. Right now it opens the social media in a new window ( i wish to open it in the same thankks) @mldarshana

#6

Hi there,

Please try this custom JS:

(function($){
  $('#sfm-sidebar .sfm-social li a').attr('target', '_self');
})(jQuery);
#7

It works perfectly thank you @Jade . Great support as always . Applause , applause +1

#8

You’re most welcome. :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.