Add social icons with no text. only icons.

Hi @vaidookas,

Wp Symposium Toolbar has a tab for “Share” which helps to add the following “LinkedIn, Facebook, Twitter, Google Plus, StumbleUpon, RSS Feed and Mail To” to the toolbar either on the left or on the right.

It also allows for some styling of those icons. There isn’t a need to add via custom menu for those icons. And there is no text added.

The link shared can be “The site homepage”, “The current page if it shows a single post, the homepage otherwise”, and “The current page, whichever it is”.

Is that what you are looking for?

Hey, I would look exact that style but that the links would direct to sharing but would direct to our Facebook, Instagram and Twitter pages. So I would need to change those links somehow. is there an easy way to do that?

I understand what you want is having links to your social pages on top of the screen, fixed links to pages that is. What I would suggest is using the plugin feature called Custom Menus to create Toolbar items linking to whatever pages you want. You’ll need to create as many menus as icons you want, so you can style the item with the corresponding icon. I’ll describe how to add the Facebook icon and link and you may replicate with others, at your will.

First we’ll create a WP NavMenu from the WP Appearance > Menus page, call it Facebook (purely a reference here)
Then, add a custom link to that menu, with the link to the target social page. You also need to give it a name at this stage, which will show in the menu (or the Toolbar), so you’ll want to put a single space char in it to actually hide it.

Second, go to the plugin settings page > Custom Menus tab, and define a custom menu with the following elements: name, select your new menu “Facebook”, location, right of the Create menu (or anywhere else on the Toolbar), and fonticon, choose the Fb icon from the WordPress dashicon pack (code is f304). Save from the button at the bottom of the plugin settings tab, the Fb icon should appear in the Toolbar, linking to your social page.

Hope this helps

Thanks Guilaume it works! Tried the same approach before but WP didnt let me to save menu with only “space” as a menu name. To overcome that:
1. Create custom link menu item with using “space” as name
2. name will become “pending”
3. edit item again and enter space as a name again
4. save.

it works this way.

How I could add instagram icon? its not on the wordpress icons list and if I upload my own image it doesnt chage color on hover. My theme has “fusion icons” but your plugin doesnt accept that. is there a way around?

You’re correct, you need to edit it after creation, sorry if I was unclear here.

What aobout the instagram icon issue? should I open new ticket sir?

I have reopened the ticket, sorry, we’re posting at the same time.
For the Instagram icon, you could add your own CSS to style the :before pseudo element of that item, but I would need to dig a little deeper into the theme.

I am currently working on https://www.guidedprofit.co.uk you can see that currently I have enabled your social icons. At the bottom of the page there is my theme’s instagram icon, maybe you can grab CSS from that and give me a code how I could add it via custom CSS part please ?

Could you try adding the class fusion-icon-instagram to the WordPress Menu item, the custom link for Instagram ? If the class field does not show you may need to go to the screen properties on top of the screen, and tick “classes”.

I’m glad to see this is being resolved. I will bow out. Good information though.

Hey, just tried. It comes up as a blank space with no icon but with the link to my istagram. Looks like icon is not appearing :/

Yes, I see that… Does not work directly, different kind of objects :/
The CSS you’d need to add should be something like

#wpadminbar .fusion-icon-instagram .ab-item:before {
  content: "\e615";
}

For a quick test you could edit wp-content/themes/Avada/style.css, about two-third down the file…

Please see what happened now ?? it shows rectangular. We are getting somewhere Guillaume ??

Indeed, lol

#wpadminbar .fusion-icon-instagram .ab-item:before {
  font-family: 'icomoon';
  content: "\e615";
}