Social Media Icons Not Showing in WordPress? 6 Fixes

Icons that will not appear are almost always one of six things. This list is ordered by how often each is genuinely the cause — not by how interesting it is to fix. Work down it and you will usually be done inside ten minutes.

Start with a 30-second triage

Before changing any settings, right-click the page and choose View Page Source, then search (Ctrl/Cmd+F) for part of your icon markup — a class name like fuse, or one of your profile URLs.

  • The markup is there → the icons are rendering and something is hiding them. Skip to the CSS section.
  • The markup is missing → the plugin is not outputting anything on this page. It is a settings, rule or caching problem.

That one check splits the problem in half and stops you changing colour settings for twenty minutes when the real issue is a z-index.

1. The URL is malformed

This causes more of these reports than the other five combined. Social icon plugins link exactly what you type. If you entered facebook.com/yourpage, or just yourpage, the browser treats it as a relative path and sends people to yoursite.com/yourpage — which is usually a 404.

Every profile URL needs the full address: https://facebook.com/yourpage. Check each one by opening it in a private browsing window, where you are not logged in. A profile URL that only works while you are signed in is a different problem worth catching early.

Special cases

  • Email needs mailto:you@example.com, not a bare address.
  • Phone needs tel:+441234567890.
  • WhatsApp needs https://wa.me/441234567890 with no plus sign, spaces or leading zero.

2. A display rule is hiding it

If your plugin supports per-page visibility rules, check whether the page you are testing is excluded. This trips people up constantly: it is common to exclude “all pages” while setting things up, then forget, then test on a page.

Also check post-type rules. “Hide on all blog posts” will make the bar vanish from every article while your homepage looks perfect, which sends people hunting in entirely the wrong direction.

3. Mobile is switched off

Most plugins have a “show on mobile” toggle, and plenty of people turn it off early on and forget. Rather than reaching for your phone, resize your desktop browser window narrow — it is faster, and it rules this out in two seconds.

If you do want icons on mobile but a vertical rail is in the way, look for a sticky bottom bar option instead of hiding them outright.

4. Your cache is serving an old page

There are usually three layers, and clearing one is not enough:

  1. Your caching plugin — WP Rocket, W3 Total Cache, LiteSpeed, WP Fastest Cache.
  2. Your host’s cache — many managed hosts run server-side or edge caching independently of any plugin.
  3. A CDN — Cloudflare and similar hold their own copy.
Quick test

Add a query string to the URL: yoursite.com/?x=1. That usually bypasses page caching entirely. If the icons appear with the query string and vanish without it, you are looking at a cache, not a bug — and you can stop debugging the plugin.

5. A theme conflict

If the markup is in the source but you cannot see it, it is CSS. Open your browser’s inspector, find the icon container in the Elements panel, and look at the computed styles. Four usual suspects:

  • overflow: hidden on a parent wrapper, clipping a fixed-position bar. Common on themes with full-width section wrappers.
  • z-index — a sticky header, cookie banner or chat widget sitting on top. Your bar is there; it is just underneath something.
  • display: none from a responsive rule at your current window width.
  • position conflicts — a theme setting position: relative with a transform on a wrapper changes what position: fixed is relative to, which can park the bar somewhere unexpected.

That last one is genuinely obscure: a CSS transform on an ancestor creates a new containing block, so a “fixed” element is no longer fixed to the viewport. If your bar scrolls away instead of staying put, this is almost certainly why.

6. A plugin conflict

Deactivate other plugins one at a time, starting with anything that touches front-end layout — page builders, popup and optin plugins, cookie banners, other social plugins, lazy-load and optimisation plugins.

Do this on a staging copy, not your live site. If you have no staging environment, do it at your quietest hour and reactivate as you go.

Optimisation plugins deserve special suspicion. Aggressive JavaScript deferral, CSS minification and “remove unused CSS” features routinely strip the styles a floating bar depends on. If you run one, add the social plugin’s assets to its exclusion list before concluding the social plugin is broken.

Icons appear but look wrong

A few adjacent problems worth naming:

  • Squares or boxes instead of icons → an icon font failed to load. Check the browser console for a 404 on a font file, and check your CDN is serving fonts with the right CORS headers.
  • Icons stacked vertically when they should be in a row → your theme is applying list styles. The plugin’s own CSS is probably being stripped by an optimisation plugin.
  • Wrong colours → a theme rule with higher specificity. Inspect the element and see which stylesheet is winning.

What to send when you ask for help

Gather three things and you will usually get a fix in one reply instead of a week of back and forth:

  1. The URL of a page where the problem is visible.
  2. A screenshot of the plugin’s settings screen, not a description of it.
  3. Whether the icons appear in View Source.

That third item is the one almost nobody includes and the one a developer wants first. It tells them immediately whether they are debugging output or debugging CSS.

Preventing it happening again

Most repeat occurrences come from the same three habits, and all three are easy to change.

Test after every plugin update, not every month

Social icons break most often immediately after an update to an optimisation, caching or page-builder plugin — not after updating the social plugin itself. Load one page with icons after any front-end plugin update. It takes five seconds.

Keep a staging copy

Most managed hosts include one-click staging. Updating there first turns “my icons vanished on the live site” into “that update breaks the icons, let us find out why” — the same problem without the urgency.

Write down your exclusions

If you set display rules, note what you excluded and why. Six months later, “why is the bar missing on the about page” is a five-minute investigation instead of a thirty-minute one.

When it is not worth debugging

If you have worked through all six causes and the icons still will not render, the fastest route is often to switch plugins for ten minutes as a test. If a different social plugin renders correctly on the same page, the problem is the original plugin and you can report it with certainty. If the second plugin fails too, the problem is your theme or another plugin, and you have narrowed it enormously. Either way you have turned an open-ended search into a definite answer.

>

Related guides

Add your social icons in about five minutes

Fuse Social Icons is free on WordPress.org — 17 networks, four placements, no code. Pro unlocks all 43 networks, display rules and click analytics.