Replicating Circular Social Buttons

[njwest]

Greetings, I am trying to use the footer social buttons on Kings Park Movie.com in the sidebar but can’t replicate the CSS. Please help!

I am copying and pasting the <div class="x-social-global" style="font-size:2em"><a>icon</a></div>
code but have thus far been unable to get the buttons to have circular containers or be inline-block with custom CSS.

[thai]

Hi There,

Can you please share us with your admin account so we can take a closer look?

Thanks.

[njwest]

Sent securely

[thai]

Hi There,

I added the following HTML code to the text widget:

<div class="x-social-global">
	<a href="tel:+123456789" style="outline: none;"><i class="x-icon x-icon-phone-square" data-x-icon="" aria-hidden="true"></i></a>
	<a href="mailto:[email protected]"><i class="x-icon x-icon-envelope-o" data-x-icon="" aria-hidden="true"></i></a>
	<a href="#holder" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a>
	<a href="#holder" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="" aria-hidden="true"></i></a>
	<a href="#holder" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="" aria-hidden="true"></i></a>
</div>

Then add the following CSS:

.textwidget .x-social-global a {
    margin-left: 6px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 24px;
    color: #000;
}

Everything looks fine.

Cheers!