Docs

[iRocketdesign]

I would like to add facebook links for 3 separate companies on my site at the bottom, above the footer (since the footer only allows for one facebook). Can I do this in widgets or is there an approved social media widget that will not cause conflicts? I want to be able to have the FB logo clickable and be able to identify which company page it leads to with type below each FB logo.

thanks,
Rick

http://www.companionlink.com

[Friech]

Hi There,

You can add the html below on a footer text widget.

<div class="x-container cs-ta-center custom-social-links max width">

<div class="x-column x-sm x-1-3">
<a href="#" target="_blank"><i class="x-icon x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a>
<h6 class="mts">COMPANY A</h6>
</div>

<div class="x-column x-sm x-1-3">
<a href="#" target="_blank"><i class="x-icon x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a>
<h6 class="mts">COMPANY B</h6>
</div>

<div class="x-column x-sm x-1-3"">
<a href="#" target="_blank"><i class="x-icon x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a>
<h6 class="mts">COMPANY C</h6>
</div>

</div>

Replace the # with an actual facebook page url and the company with the actual company name.

Let us know if you need custom CSS to style this icons.

Hope it helps, Cheers!

[iRocketdesign]

Yes it will work, however the icons are tiny. Can you tell me what to add to make them larger?

thanks,
Rick

[iRocketdesign]

Also I would like to change the color of the type for the 3 company names.

[Rahul]

Hey There,

Thanks for writing back!

The social media icons look pretty larger here. See attached!

Would you mind double checking it?

Thanks for understanding!

[iRocketdesign]

Not sure where you got that from, but this is my site.

[Friech]

Hi There,

Is this your site domain http://www.companionlink.com

How do we view the site that you’re working on? Currently that domain is giving us this page.

Thanks.

[iRocketdesign]

No it is http://www.companionlinc.com

Sorry my computer autocorrected the first address.

[Rupok]

Hi there,

Thanks for writing back with correct URL! You can add this under Custom > CSS in the Customizer.

.custom-social-links a {
    font-size: 36px;
}

And you can use Custom classes for the h6 and adjust color individually with CSS.

Hope this helps.

Cheers!

[iRocketdesign]

Awesome! Yes.

[Rahul]

You’re most welcome!

Feel free to ask us again.

[Author]

Posts