Icons no longer appear

Found a workaround –

Noticed in browser dev console that the font-face declaration has changed from ‘FontAwesome’ to ‘Font Awesome 5 Free’, and broke everything.

Adding the following CSS (I use the Simple CSS plugin) fixed the issue, at least for me. YMMV depending on your theme and if FontAwesome is used by other plugins on your site, but this will help some of you out.

.fa, .fas {
  font-family: 'FontAwesome' !important;
}

• This reply was modified 5 years, 11 months ago by slomeli79.

@slomeli79 Thanks for the workaround. Well Done!

It indeed works for the icons for this plugin.

One suggestion: I would include the parent div (or some parent class) otherwise it may break other FontAwesome icons used and implemented differently (correctly..??) in other parts of the site.

This worked for me: #ssb-container .fa, #ssb-container .fas {font-family: 'FontAwesome' !important;}

Thanks again.

First off, thank you for this plug-in and the support. I have been a happy user for years.

I have the problem at https://www.versustexas.com and https://www.familytexas.com
I tried to manually select an icon as suggested, but this is what my options look like. I temporarily added text on my buttons.

https://pasteboard.co/HSNWqLya.png

• This reply was modified 5 years, 11 months ago by planAandB.

Thanks for sharing your fix @slomeli79 and @wpfiend . This will work for cases where your theme and/or another plugin is bundling a different version of fontawesome. In your case, the issue with broken fontawesome (in Sticky Side Buttons plugin or elsewhere) is caused by conflicting versions of the font being loaded.

I’m unsure if this is the same root cause as other users in this thread. Unfortunately, I’ve not been able to replicate the issue in a test environment. As it only seems to affect a very small number of existing users of the plugin, I think it may be some sort of conflict with other scripts on specific sites, causing error with the migration or conflict with the new version fontawesome itself. Without examining each case directly, or being able to replicate, it’s really hard to identify and fix! Two things:

1.) Any users still experiencing this… please can you try deactivating and deleting the Sticky Side Buttons plugin, and then re-installing and activating it? I’ve not had any reports of this issue affecting new installs of the plugin, so I’m curious if a fresh install will solve it.

2.) If that still doesn’t do the trick, are there any users who can get in touch privately with login details so I can take a look at the code on an affected site directly?

Thanks for your help and patience working this out folks.

@enigmaweb thank you so much for this plugin and your support. I’m reporting on your suggestion to deactivate and re-install. The first time I tried it, it didn’t work. I tried again and emptied the cache before re-installing. I had to re-chose the icons (which didn’t help before deletion and reinstallation) and worked perfectly this time. Thank you!

Thanks for reporting back @aardvarkcs

I’ve run some more tests today and I’m starting to wonder if this is actually a cache issue – old version of FontAwesome getting cached either at the server layer, any proxy service (eg Cloudflare) layer, or the user’s browser. Could affected users please try visiting site in an incognito browser window and/or clearing your computer’s browsing data? Does the issue still occur?

Are affected users running CLoudflare, WP Super Cache plugin, or some other form of caching on the site?

@enigmaweb It looks like going back and re-building all the icons worked here, too.

What I found was that the icon classes ALL changed from the old fas fa-[whatever] to fab fa-[whatever]. Basically, the latest version isn’t backwards-compatible with the older one’s CSS settings?

fab class (latest version) sets the font-family = 'Font Awesome 5 Brands'
while
fas class (prior versions) had the font family = 'Font Awesome 5 Free'

(Ensured no caching in play on this site.)

It is interesting: when accessing the site web page, buttons show empty with their names inside each square and showing the colors I chose for the fonts.
If I choose to go to another page in the website they then appear bright and shiny in every page.
Seems that it takes some action to show up.
Please access yidishmusic.com.br to look at this and see if it happens also to you.
I have a screen print if you wanna see it.

That’s caching! Please clear your computers browsing data, and turn off any caching plugin or proxy (eg Cloudflare, W3Cache etc)

Already did that. Tried also from other machines. That happens only on desktops. On mobiles (I activated for mobiles to see what comes) they work as a dream. It may be something with WP directly because the Menu sign (3 lines) related directly to the theme also presents the same effect. At first they do not show, after the first navi action (choose another page in the same site) they all come alive. Cannot see any action on my side to improve that. Tried also with different browsers (edge, Firefox, Chrome, Opera). Same result. Looks like some actions are simply forgot in the process…. or maybe are out of order inside the code. If you have any other ideas, let me know and I could help trying that.