How to get social icons in footer to be rounded (circle)

Hello.
First of all I have to say that Im totally in love with Moesia theme. It’s amazing.

Well, I was making some customizations on CSS to show my social icons on a circular shape
I`ve been trying with some codes, with no luck (still square shape)

.social-widget li a{border-radius:50%;}
.social-widget li{border-radius:50%;}

Could you help me please?

Sorry, forget to send my site link:

http://lemon.digital/

Hello there,

To change it becomes circular, it’ll involve a bit complex CSS code as the Font Awesome icons code are square by default; you should use other icons code. Please try adding the below extra CSS code to Appearance > Customize > Additional CSS from your site dashboard.


.social-area a,
.social-widget a {
  border-radius: 50%;
  overflow: hidden; 
  display: inline-block;
  width: 65px;
  padding-top: 14px;
  padding-bottom: 14px;
  background-color: #F39200;
  text-align: center;
}

.social-area a:before,
.social-widget li a:before {
  font-size: 30px;  
  color: #3e4949 !important;
}  

/* Replace the default icons */ 
.social-widget a[href*="twitter.com"]::before,
.social-area a[href*="twitter.com"]::before {
	content: '\f099';
}
.social-widget a[href*="facebook.com"]::before,
.social-area a[href*="facebook.com"]::before {
	content: '\f09a';
}
.social-widget a[href*="plus.google.com"]::before,
.social-area a[href*="plus.google.com"]::before {
	content: '\f0d5';
}
.social-widget a[href*="linkedin.com"]::before,
.social-area a[href*="linkedin.com"]::before {
	content: '\f0e1';
}

Regards,
Kharis

Hay Kharis
Worked like charm
Thanks for extra fast support
Nice day

Diana

You’re welcome, Diana!

I was glad to have an opportunity to assist you.

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

I am not sure, how ever you can simply try to find some kind of plugin, which already has this rounded icons. Just search that, you will find many variants. I just checked Social Icons By ThemeGrill has option of rounded social icons