Social Profile Widget Change Icons


#1

In the Social Profile Widget Facebook, Twitter, Insagram, etc… all have pre-selected icons. Is there a way to change the icons to something else such as found on font awesome?

Thanks!


#2

Hello there,

You can use the below CSS code to change the default icon.

.social-media-list a[href*="twitter.com"]::before {
  content: "\f099";
}

.social-media-list a[href*="facebook.com"]::before {
  content: "\f09a";
}

.social-media-list a[href*="plus.google.com"]::before {
  content: '\f0d5';
}

.social-media-list a[href*="dribbble.com"]::before {
  content: '\f17d';
}

.social-media-list a[href*="pinterest.com"]::before {
  content: '\f231';
}

.social-media-list a[href*="youtube.com"]::before {
  content: '\f167';
}

.social-media-list a[href*="vimeo.com"]::before {
  content: '\f27d';
}

.social-media-list a[href*="instagram.com"]::before {
  content: '\f16d';
}

.social-media-list a[href*="linkedin.com"]::before {
  content: '\f0e1';
}

.social-media-list a[href*="foursquare.com"]::before {
  content: '\f180';
}

.social-media-list a[href*="tumblr.com"]::before {
  content: '\f173';
}

.social-media-list a[href*="deviantart.com"]::before {
  content: '\f1bd';
}

.social-media-list a[href*="weibo.com"]::before {
  content: '\f18a';
}

.social-media-list a[href*="xing.com"]::before {
  content: '\f168';
}

.social-media-list a[href*="trello.com"]::before {
  content: '\f181';
}

.social-media-list a[href*="mailto"]::before {
  content: '\f0e0';
}

Replace the content value:

content: "\f099";

with Font Awesome icon’s code which can be found in this page. For example f015 is for home icon.

.social-media-list a[href*="facebook.com"]::before {
  content: "\f015";
}

The result will look like this

11

Regards,
Kharis


#3

Thank you that’s really helpful! Is there a way I can get rid of the color circle around the icon? And is there a way to change the icon size?


#4

You can use this code:

    .social-media-list a[href*="facebook.com"]::before {
      background-color: transparent;
      color: #ff0000;
      font-size: 40px;
    }

Regards,
Kharis


#5

Awesome thank you! That’s exactly what i wanted.


#6

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis