Social icons on top bar

Hello Xtemos,

I would like to set the social network icons on the right-side corner of the top bar of the theme. How could this be done? When I go to Appearance > Menus I can’t find the right way to include [social_buttons type="follow"] on the menu associated with Top Bar Menu. Is this by any chance done through custom links putting an html image where it says Link Text?? I’m sure that there has to be a better solution for this.

It would work for me as well to include these icons on the left-side corner of the top bar, but when I go to Theme Setting > Header > Top bar and write this text on “Text in the header top bar”…
<i class=”fa fa-whatsapp” aria-hidden=”true”></i> CALL OR WHATSAPP: +34 669 669 501 | [social_buttons type="social_buttons"]
… I get this:
https://s31.postimg.org/bw3ddbw6j/icons_top_bar.png

I need to include the text of the phone number on that part as well, so I can’t get rid of it.

What’s the best way to work all this out?

Thank you very much

Hello there,

Thank you for creating with our theme.

There is no way to place social icons in the right side. So please put it in the left side of the top bar and also add the following code snippet to fix appearance bug in Theme Settings -> Custom CSS

.topbar-wrapp .social-icons {
    display:inline-block;
}
.topbar-wrapp .social-icons li {
    margin-top:0;
    line-height: 1;
}

Regards

Thank you for the prompt answer. Still one issue to solve with these icons… This is how it looks now: https://s31.postimg.org/tbmk5rcln/Screen_Shot_2016_06_29_at_10_43_24.png

And I would like to give a bit more space to one side and another of the pipe line and also I would like to decrease the size of the social icons. I have tried to do both myself unsuccessfully. For the first one I’ve used both <i> and <span> opening and closing tags with spaces in between but didn’t make any change. And for decreasing the size of the icons I used the font-size attribute inside the chunk of code that you gave me to use in Custom CSS but it didn’t work either.

This doesn’t work:
.topbar-wrapp .social-icons li {
margin-top:0;
line-height: 1;
font-size:6px;
}

Could you please help me?

Try the following one instead

.topbar-wrapp .social-icons {
    display:inline-block;
    margin-left:15px;
}
.topbar-wrapp .social-icons li {
    margin-top:0;
    margin-left: 3px;
    margin-right: 3px;
    line-height: 1;
}

And replace social buttons shortcode with this [social_buttons size="small" type="social_buttons"]

This works beautiful! Thank you.

You are welcome!

[Author]

Posts