Change the social icons in topbar to another Unicode

[leehart09]

Hi, I have activated the social icons in my topbar, however they don’t really tie in with the minimalistic look I am going for.

So, instead of the icons that have a rounded shaded square around them, I would like to change them out for the minimalistic version. I found some unicode numbers on http://fontawesome.io/cheatsheet/, but not sure how to use them to change the social icons.

Can you help me with this?

[Prasant]

Hello @leehart09,

Thanks for asking.

If you are looking to have a minimal version of social icons at the same time not having rounded icons, please try out following CSS under X > Launch > Options > CSS:

.x-topbar .x-social-global a {padding: 4px; background-color: #2f2f2f; color: white; width: 30px; height: 30px;}

.x-topbar .x-social-global a:hover {background-color: #6f6f6f; color: #e0e0e0;}

.x-topbar .x-social-global .x-icon-facebook-square:before {content:"\f09a";}

.x-topbar .x-social-global .x-icon-twitter-square:before { content:"\f099"; }

.x-topbar .x-social-global .x-icon-google-plus-square:before {content:"\f0d5";}

.x-topbar .x-social-global .x-icon-pinterest-square:before {content:"\f231";}  

You can change the color code as per requirement.

Thanks.

[leehart09]

That’s exactly the look I was hoping for! Thank you!

Wondering if you could help with two related things:

1. When I hover over the social media buttons on the topbar, you can see a shaded square around them…can this be changed so that the minimalist icons themselves turn a different colour, but so that they don’t have a shaded area around them on hovering over them (e.g. pink).

2. What code should I put in the Custom CSS to make sure that the social media icons in the footer match the topbar?

Thanks so much.

[leehart09]

Actually, disregard that question - I think I just managed it myself by removing .x-topbar from the beginning of the lines, and changing the background colours.

Thanks again!

[lely]

Glad you were able to figure this out. For further inquiries, please do open a new thread. You can also visit our knowledge base here.