[AndcomParticipant]

Hi,

Some questions in which the best way to create my social media icons in the top bar.

Am I best adding the raw codes or using the social media tool and customizing it.

I have switched it all off for now. What I want to create is a row of icons with links to the appropriate function. I have attached a picture of what I am hoping to achieve, so basically on a mobile it will go all the way across hopefully, the colour behind will stretch out.

I wish to add mail, phone, skype,fb,tw,g+,Li.

I was figuring the below would be one way, but is it the best way. Please advise.

<i class=”x-icon-skype”></i>

And other varioartions..
I tried adding these into the topbar text area, I don’t get an icon just the code looking for it.

Please help. Thanks in advance.

Url: https://anwweb.com

[AndcomParticipant]

The code doesn’t show above, the code I was testing is in the widget area under test.

I want these buttons in the top bar with colour background & % width as per the pic.

TIA

[RupokMember]

Hi there,

Thanks for writing in! You can use the Icon shortcode and add style to this if needed – http://theme.co/x/demo/integrity/1/shortcodes/icons/

Example :

<a href="http://www.facebok.com">[icon type="facebook" style="color: #fff; background: #3b5998; width: 80px;"]</a>

Do the same for other icons.

Cheers!

[AndcomParticipant]

That’s what I thought, but why do I get the code error not the icon when I add the code to the topbar text area. per attached.

Oh and it works in the widget area, how do i center the icon in the new box.

Thanks

[RupokMember]

Hi there,

Thanks for updating. If the shortcode doesn’t work on the Topbar then you can just use HTML as follows :

<a href="http://www.facebok.com"><i aria-hidden="true" data-x-icon="" class="x-icon x-icon-facebook" style="color: #fff; background: #3b5998; width: 80px; height: 40px; line-height: 40px; text-align: center;"></i></a>

(Note : I have added the text-align: center; to center the icon and line-height same as the height to make it vertically center )

You can copy the HTML (see – http://prntscr.com/alv2kb) from the shortcode page – http://theme.co/x/demo/integrity/1/shortcodes/icons/

Hope this helps.

Cheers!

[AndcomParticipant]

Ah ha, that make sense now. When I first tried this I didn’t realize all the data x icon’s are individual (as to the eye they look the same). Just so you and other users know (unless i’m completely dumb) there’s no copy to html on PC. So instead I have inspected element and copied the data icon from there, which works as needed.

Sorry for another question, I got there size’s how I want. When i add the code into the widget or somewhere else and use % they fit to the box or area. How can I create the same on the top bar, i tried the % command instead of px but it doesn’t work the same here. So if I have 5 icons I want then to be say 19% (allowing for a gap) each along a full top bar.

TIA

[AndcomParticipant]

The % is working now, but is the top bar half the size of the screen, how do I make them fill the top bar left to right. thanks

[FriechModerator]

Hi There,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[AndcomParticipant]

Yes, sorry if not clear. I want the newly created icons with backgrounds, to stretch the whole of the top bar area. At present if I make they say 4 x 24% buttons, they are all grouped in the top left. I want them to stretch out and fill the top bar fully.

[Paul RModerator]

Hi,

To achieve that, you can add this under Custom > CSS in the Customizer.

.x-topbar .p-info {
    width:100%;
}

.x-topbar .x-container.max.width {
    width:100%;
    max-width:100%;
}

Hope that helps.

[Author]

Posts