How to change the social icons and color of them on the superfly menu

[Borislav_VD]

I wish to change the color of the social media buttons when the mouse is over them ( the hover color) and i wish to change the icon . How could be done ? I have found 2 topics about them , but i have not clear the concepts and may be it were working on previous versions.

Topic: Remove Hover Effect in Superfly | Themeco Community

To make the hover color of the social icons below the menu the same, please use this custom CSS:

#sfm-sidebar .sfm-icon-facebook a:after,
#sfm-sidebar .sfm-icon-twitter a:after,
#sfm-sidebar .sfm-icon-youtube a:after,
#sfm-sidebar .sfm-icon-email a:after {
background: green; /Change to your preferred color/
}

but i wish to give them different colors not always the same .

---

How to change superfly social icons?

.sfm-icon-soundcloud a:before {
content: “\f09b” !important;
font-family: fontawesome;
}

thanks

[ruenel]

Hello There,

Thanks for posting in!

To resolve your issue, please make sure of this code:

.sfm-sidebar .sfm-icon-facebook a:after {
  background: green; /*Change to your preferred color*/
}

.sfm-sidebar .sfm-icon-facebook a:before {
  color: red; /*Change to your preferred color*/
}

.sfm-sidebar .sfm-icon-twitter a:after {
  background: green; /*Change to your preferred color*/
}

.sfm-sidebar .sfm-icon-twitter a:before {
  color: red; /*Change to your preferred color*/
}

.sfm-sidebar .sfm-icon-youtube a:after {
  background: green; /*Change to your preferred color*/
}

.sfm-sidebar .sfm-icon-youtube a:before {
  color: red; /*Change to your preferred color*/
}

The available element classes for each icons are: .sfm-icon-facebook, .sfm-icon-twitter, .sfm-icon-linkedin, .sfm-icon-gplus, .sfm-icon-instagram, .sfm-icon-youtube.

Hope this helps.

[Borislav_VD]

it does not work . The colors are still the same as before

[christopher]

Hi there,

Please change the code to:

#sfm-sidebar .sfm-social li.sfm-icon-facebook a:after {
  background: #ff00ff;
}

#sfm-sidebar .sfm-social li.sfm-icon-twitter a:after {
  background: #00ff00;
}

#sfm-sidebar .sfm-social li.sfm-icon-youtube a:after {
  background: #0000ff;
}

#sfm-sidebar .sfm-social li.sfm-icon-linkedin a:after {
  background: #ff0000;
}

#sfm-sidebar .sfm-social li.sfm-icon-gplus a:after {
  background: #ffff00;
}

#sfm-sidebar .sfm-social li.sfm-icon-instagram a:after {
  background: #00ffff;
}

The result should be something like this:

If you do not get a result like a screenshot above, make sure that you clear any cache plugin that you have and check the case on another machine.

If you still have problems kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thank you.

[Borislav_VD]

@christopher.amirian

#sfm-sidebar .sfm-social li.sfm-icon-facebook a:after {
background: #ff00ff;
}

#sfm-sidebar .sfm-social li.sfm-icon-twitter a:after {
background: #00ff00;
}

#sfm-sidebar .sfm-social li.sfm-icon-youtube a:after {
background: #0000ff;
}

#sfm-sidebar .sfm-social li.sfm-icon-linkedin a:after {
background: #ff0000;
}

#sfm-sidebar .sfm-social li.sfm-icon-gplus a:after {
background: #ffff00;
}

#sfm-sidebar .sfm-social li.sfm-icon-instagram a:after {
background: #00ffff;
}

Perfect, it works thank you @christopher.amirian

[thai]

You’re welcome.