Return to previous page

Custom social icons - by emeliech - on WordPress WooCommerce support

This topic has 4 replies, 2 voices, and was last updated 6 years, 9 months ago ago by Rose Tyler

emeliech

Participant

February 20, 2018 at 11:08

Hi there,

In my top header I have my social icons.. standard fa icons.
I want to change them to my custom icons.

How can I do that please?

Copied Theme version: Latest WooCommerce version: Latest

3 Answers

Rose Tyler

Support staff

February 20, 2018 at 11:31

Hello,

This requests additional customization in files. Sorry, but customizations are not covered under our Support Policy. Code of the social widget you may find in royal/framework/shortcodes.php file 2858 line.

Regards

Copied

emeliech

Participant

February 20, 2018 at 12:22

Hm Ok.

But could I at least make them bigger?

Also, on the widget, there is a check box saying “colourful icons”. It is checked in but the icons are still white.

Copied

Rose Tyler

Support staff

February 20, 2018 at 14:28

Hello,

1. You may use this custom css code:

.top-bar .topbar-widget .et-follow-buttons a {
    font-size: 14px;
}

2. Please add custom css code as a temporary solution, we will fix this in next theme update

.top-bar div[class*="buttons-size-"].et-follow-buttons .follow-facebook:hover {
  color: #3a5795 !important;
}
.top-bar div[class*="buttons-size-"].et-follow-buttons  .follow-twitter:hover {
  color: #55ACF2 !important;
}
.top-bar div[class*="buttons-size-"].et-follow-buttons  .follow-instagram:hover {
  color: #2d5a82 !important;
}
.top-bar div[class*="buttons-size-"].et-follow-buttons  .follow-google:hover {
  color: #dd4c3e !important;
}
.top-bar div[class*="buttons-size-"].et-follow-buttons  .follow-pinterest:hover {
  color: #bd2126 !important;
}
.top-bar div[class*="buttons-size-"].et-follow-buttons  .follow-linkedin:hover {
  color: #1898b9 !important;
}
.top-bar div[class*="buttons-size-"].et-follow-buttons  .follow-tumblr:hover {
  color: #35465c !important;
}
.top-bar div[class*="buttons-size-"].et-follow-buttons  .follow-youtube:hover {
  color: #e2282e !important;
}
.top-bar div[class*="buttons-size-"].et-follow-buttons  .follow-vimeo:hover {
  color: #2ab8e8 !important;
}
.top-bar div[class*="buttons-size-"].et-follow-buttons  .follow-rss:hover {
  color: #f97636 !important;
}

Regards

Copied