Wrapping menu item in

Seems like you got this worked out, yes? I do see a custom shop icon with no text.

If not, post back with what’s still vexing you, but if so please mark this as ‘resolved’ – it helps those of us who try to help in the forum to not spend time on issues that are already fixed, so we can focus on those that still need help….thanks! ??

Thanks for the reply Not quite. The shop icon is working just fine, but the social icons (for which I’ve used fontawesome) are still an issue.

I can’t seem to remove the link text without removing the whole link. I just want icons all across the social menu, and no text. It seems the icon and the link are separate.

Ah, I get it.

The font-awesome icon is separate from the text because it’s called using the :before selector in your CSS. This is also why the icon itself is not linked – so if you hid the text, nothing would be clickable.

While the WP menu function wasn’t designed to be used for graphics in place of text, there is a potential workaround, but I don’t think it will meet your goal of keeping it simple for your client to modify, not without potentially messing it up.

The workaround would involve NOT using the CSS to add the font-awesome icons, but put them directly into the link using the direct method like this:

<i class="fa fa-twitter" aria-hidden="true"></i>
Then wrap the actual text link in a span tag, and hide that span using CSS. Workable, but anyone modifying the links could mess it up and it would break.

Since the goal is to keep it simple for the client, would you consider just using a social plugin? Perhaps Ultimate Social Media Plus (possibly overkill but has a lot of great options and features) or a more simple one – even the only-decent ones let the user modify it’s settings to add/change/delete links to social accounts as needed and provide nice looking icons.

Alternatively, you could give them a simple flat (non-heirarchical) custom post type with only two metaboxes besides the title (the title has to stay) – the first metabox could be for the font-awsome icon (using either the name or unicode) and the second metabox could be for the link (remove all other normal metaboxes for this CPT so as to not confuse them) – the do a simple query to loop through them and structure a simple list with that metadata that you drop into the header, either in the template or in a widget, with or without using a shortcode.

In that method they could add, edit, or delete any of the CPTs as they need to and your menu would still work….they would just have to be careful to use the proper unicode or icon name for the icon, and make sure they paste the URL in for the link.

Thanks for the thorough reply! I’m leaning toward the plugin option, mostly based on ease of use for the client, but I’m wondering if I’d still be able to use the custom shop icon with a plugin?

I’ll likely push the client toward using a shopping cart or similar icon that’s available rather than the custom shop icon. The shop sign isn’t even that readable, especially on mobile.

They have a shop that they use to sell their photos, but it’s not set up yet. Once that shop link is set up, they want to be able to set that link and have the icon already in their site.

That’s really what’s necessitating all of this.

Also, if I were to use a plugin option would I be able to put the social icons in the header, footer, and blog sidebar? That is also something they want.

Yes, most of the plugins let you use some sort of shortcode or template function (PHP) to place the icons where you want them. Some let you control the styling, others you may have to override their styles with your own.

For the most part I’m really happy with the Ultimate Social Media Plus plugin and it does have a lot of great features and style options:
https://www.ads-software.com/plugins/ultimate-social-media-plus/

As for putting your custom shop icon (or any icon you can talk them into using) I think you can still accomplish having it inline with the social icons by just using CSS – put your shop icon in a widget before the social shortcode and force some CSS styling to display it all inline.