Docs

[Fedde]

Hey staff,

I’m trying to change my social icons in the topbar to a different icon from theme x.
I’m aiming for this look: https://www.tonyrobbins.com/
URL: http://www.feddewestera.nl

I’ve tried:
[x_icon type=”facebook”]
But this did not show the social icon.

Best regards,

Fedde Westera
Thanks in advance

[Friech]

Hi Fedde,

Thanks for writing in! Please add this on your Topbar content.

<ul class="topbar-socials">
	<li><a href="YOUR FB PROFILE URL HERE" target="_blank">
			<i class="x-icon x-icon-facebook"></i></a>
	</li>
	<li><a href="YOUR TWITTER PROFILE URL HERE" target="_blank">
				<i class="x-icon x-icon-twitter"></i></a>
	</li>
</ul>

Then add this on Customizer’s Custom CSS

ul.topbar-socials {list-style: none;}
ul.topbar-socials li {
    display: inline-block;
    padding: 10px 10px;
    font-size: 1.5em;
}

Feel free to adjust those values.

Hope it helps, Cheers!

[Fedde]

Thanks for the fast response!
That didnt work though. Feels like only the CSS affected the topbar.

Best Regards,

Fedde

[Paul R]

Hi Fedde,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Fedde]

This reply has been marked as private.

[Paul R]

Hi Fedde,

Please change your topbar content to this.

085.303.7896 |<a href="https://www.facebook.com/fedde.westera.nl" target="_blank"><i class="x-icon x-icon-facebook" data-x-icon="" aria-hidden="true"></i></a>
<a href="twitter.com/feddewestera" target="_blank"><i class="x-icon x-icon-twitter" data-x-icon="" aria-hidden="true"></i></a>

Then add this in custom css in the customizer.

.x-topbar .p-info,
.x-topbar .p-info a  {
    color:#fff;
}

.x-topbar .x-social-global {
    display:none;
}

Hope that helps

[Fedde]

Awesome! That worked! One last thing though, there are small dots underneath the social icons. Is there a way to remove those?

Thanks in advance!

Fedde

[Paul R]

Hi Fedde,

To remove it, you can add this in Custom > Edit Global Css in the customizer

.x-topbar .p-info a  {
   border:0;
}

Hope that helps

[Fedde]

Thanks alot!

[Paul R]

You’re welcome! 🙂

[Author]

Posts