CSS Icons Disappear in Browser

[lilmofo812]

I have this odd issue where after publishing one one my components (not always the same one) my CSS icons stop rendering on my site. They always come back eventually but I have not been able to pin down what is making the disappear or what I did to bring them back (both seem to be a random). Now I know the chance that these are random occurrences is almost 0% but am curious if anyone else has experienced this. It's done it on different releases of alpha anywhere and has affected materialIcons and fontAwesome (though my current issue is with fontAwesome icons). I have re-installed the icon packages and republished all components (currently this new project is small so this is very easy for me to do). Any thoughts on where to look would be greatly appreciated (I don't think the page is even trying to load them because normally if I turn on the web inspector I will see an error message stating that the page tried to load insecure content related to the icons, but when I see this message the icons load, when I don't they don't load).

[lilmofo812]

Re: CSS Icons Disappear in Browser

Still running into this issue, the icons will disappear and then out of nowhere they will come back (before they come back I do try all the fixes from reinstalling the css fonts to clearing my browser cache to recalculating all the controls in my main component and re-publishing with unchecking the box that checks for previously published files to give me a clean publish).

One of the new strange things I am seeing is I am using a menu list that I configured using a javascript function and in this list I use FontAwesome icons and as soon as I click on an item in the list the icons come back as long as there is there is 3 or more items/records in the list (and when looking at the web inspector while doing this I see the warning stating "Failed to load resource: the server responded with a status of 403 (Forbidden)."

Hopefully, someone can point me in the right direction here, this is driving me up a wall!

[peteconway]

Re: CSS Icons Disappear in Browser

Report it.

[parkjammer]

Re: CSS Icons Disappear in Browser

If it's any consolation, this happens to me also.

I'd report it... except I have 46 other issues (not kidding) with Alpha at the moment.

Started a new project and have been logging all the crap I've run into; PAYING someone to help... but still moving from speedbump to speedbump as we lurch towards the finish line. I hope.

[parkjammer]

Re: CSS Icons Disappear in Browser

A possible (and ridiculous) solution... at least for me.

My Font Awesome icons had been installed and working for quite
some time.

After a fair amount of development I wanted to clear out old content
from the webserver directory (both the local dev webserver and the
remote public webserver). So I did that.

Then I re-published everything... all was OK except for the missing
Font Awesome icons.

Just for giggles I re-installed Font Awesome but that didn't help.

Figured I'd restart everything just to see if that caused either the O/S
or Alpha Developer to pick them up again. Nope.

Finally, I wanted to check to see if Alpha Develper itself could find them.

So I opened the Developer, found a component that used an icon, and
opened the selection utility (which shows all SVG, CSS, and other icons)

It could find the icons no problem.

I saved the utility.

Then my "Live Preview" started showing them again.

So I reposted to local and remote servers; and they worked too.

Apparently, Alpha Developer loses some form of connection with
Font Awesome (likely a record in a config file somewhere). This
also prevents the publishing functions from pushing the Font Awesome
directory or some form of connection to the webserver(s).

The answer then (for me) was simply to re-select a Font Awesome icon
for a button (any button), find it, and save the UX. After that everything worked
again in the Live Preview and on the webservers once the app was re-posted.


If you run into disappearing icons I hope this simple thing works for you too!



Search keys: Font Awesome, Font-awesome, FontAwesome, CSS icons, disappear

[alexc]

Re: CSS Icons Disappear in Browser

Hey guys, ran into a few issues like this and found that the link reference for the font-awesome library just was not loading into the browser ie it was missing in the head the html , this would cause a status of 403 (Forbidden). I just open up chrome debugger and check for the reference

Link-css.png

If not there you can force its hand by adding the reference.

Go to UX Properties > Head section tags and add the reference pointing to the css link file as seen in the example pic provided


Head-section.png

This usually only has to been done once if all users pass through this UX. Alternatively you can add this into any A5W / HTML page