Social icons in header inline with menu

Support
#1

Hi using the ethos theme and want the social icons to appear alongside header menu to the right hand side on the desktop version. Is there an easy way to do this?

#2

Hi there,

You can add social icons as menu items (<i class=”x-icon x-icon-facebook”>) using custom links and add further customizations:

For more information on how you need to add the code for each icon kindly check this page:

Thank you.

#3

Hi thanks for this looks like a good solution. I can get the link to work but followed the code in the example you put above but no icon appears. Am I typing this wrong?

#4

Hello There,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

#5

www.healthyfitholidays.com

#6

Hello There,

Thanks for providing the url of your site. To resolve your issue, please make use of this icon code:

<i class="x-icon x-icon-instagram" data-x-icon="&#xf16d;" aria-hidden="true"></i>

It should be something like this:

Hope this helps. Please let us know how it goes.

#7

Thanks for this this works - this cheat sheet is useful too http://fontawesome.io/cheatsheet/

Is there an easy way to change the colour of the icons?

#8

Hi There,

You can add a inline styling to your code

so instead of this:

<i class="x-icon x-icon-instagram" data-x-icon="&#xf16d;" aria-hidden="true"></i>

You will use this:

<i style="color: red;" class="x-icon x-icon-instagram" data-x-icon="&#xf16d;" aria-hidden="true"></i>

Hope it helps!

#9

Thanks is there a way of getting the social icons to be closer together?

And also to use logo text and get the font to change - i’m changing it in customiser but it isn’t changing on the screen

#10

Hi again,

To get the items closer, please add the following CSS code in your Customizer:

#menu-item-474 a, #menu-item-475 a, #menu-item-545 a, .x-menu-item-search a {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

I checked your logo and it’s a text logo I see. Please try clearing the browser’s cache and reload the site.

Hope this helps!

#11

Thanks - don’t think the brower is the problem as I tried multiple devices and the font isn’t changing - any other ideas? thanks

#12

Hi again,

You can try adding the following code in your Customizer:

.x-brand {
    font-size: 30px !important;
}

Let us know how this goes!