Social Media Icons Navbar

Support
#1

hi

I have been trying to add social media icons to my navbar, but wind up with either a square or the code which is meant to be the icon.

I created a custom link and added it to the menu. The link itself is fine, but the icon is not. Here is what I have in the Navigation Label - <i class=“x-icon x-icon-twitter” data-x-icon=“\f082” aria-hidden=“true”></i>

I have tried variations on \fo82; without the back slash with the whole code  and even without the semi-colon

Any suggestions on achieving this and is this the best way to do it? It does look like it may get cluttered. In fact, it messed the navbar up a bit

As an alternative, is there a way to add a bar above my navbar when I might put the social media icons and if so, similarly, how to add the icons?

Regards

#2

Hello @guybower1,

This could happen if your site has icon markup that you added directly rather than using our icon shortcode. As of Font Awesome version 5 they split icons into multiple fonts. This can be fixed by changing instances of the data-x-icon attribute to one of the following:

  • data-x-icon-b for social icons.
  • data-x-icon-o for outline icons.
  • data-x-icon-s for solid icons.

The original attribute data-x-icon will still work for solid icons as a fallback but we’ve updated everything for consistency.

If the issue persists, please send us the URL of the page in question so that we can check it.

Thank you.

#3

hi Jade

Thanks so much for your reply

The code I put above was the initial one I tried, but had already added the updated code with data-x-icon-b

It appears that the code no longer requires the “” either side of the social icon. I was able to add the Twitter icon successfully by using <i class=“x-icon x-icon-twitter” data-x-icon-b=&#xf081; aria-hidden=“true”></i> after eliminating the quotation marks either side.

Having said that, I can’t say I really like the look there and realise now that with 5 or 6 social media icons alongside menu items, it will become cluttered. Once they are resized and spaced closer together, they might possibly look OK, but am not convinced

http://wordpress-102462-558755.cloudwaysapps.com/

I have added a topbar now above the navbar and think this might be a better option.

Thanks so much for your help

#4

You’re always welcome.

Unfortunately, I can’t see what you have added because the link requires credentials.

#5

I added a secure not above. Thanks very much

#6

Hey @guybower1,

I’m sorry but I’m not sure if you’re still having an issue now that you’ve said you now have added the icons in the Topbar.

Anyway, the best option to use here is to use the Pro header. I see you’re using Pro so I believe this is not a hindrance. With Pro, you will not have a problem coding and you can easily space out Social Icons (not in the menu but as separate Social or Button elements).

I just want to comment about what you mentioned that removing the quotes in the code worked for you. Though it worked, the real problem there might be the pretty quotes in the code. That should be replaced by normal double or single quote.

image

Pretty quotes cause problems when used inside HTML attributes. The first quote below is a pretty quote. It differs from the normal quote below.

”

"

If you watch the video below, you’ll see that the normal double quote is used and the icon works in the menu.

Hope that helps.

#7

cheers Christian

Thanks for the info re pretty quotes vs normal quotes

Yes, I am now using Pro, though the navbar on this occasion was preset, as this was a template installed from your Design Cloud area

cheers

#8

Hi @guybower1,

You can adjust the Top bar’s social media icon links by adjusting its margin-left (by default this is only set to 8px), unfortunately, this is not an option offered in Theme Options. You need to do this via custom CSS.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Cheers!

#9

cheers Friech

Thanks for your reply

I will play around with some options

Take care

#10

You are most welcome!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.