I installed Cwicly on a clean instance of WP & have been unable to display icons on the header part, even though it worked fine on another WP instance.
Essentially, If I add the icon block to the header via a column, div or section, after setting the icon size & colour it shows fine via the editor but when I view the live web page it doesn’t show the icon at all . See same issue with Font Awesome and Phosphor icons, but I uploaded my own icon and that displays ok.
Also, if I add one of the social elements (think social 4), those icons appear in the header fine, but if I remove the additional class (icon-cfe449e) & set the icon size and colour in primary tab, this icon also does not appear on the live website.
Sorry, I dont have time to record the issue today, but I was wondering if this a known issue? If you’re unable to replicate it, please let me know and I’ll try to get you further details later in the week.
P.S - when editing the header part the editor randomly switches between the desktop, laptop & mobile responsive modes even though I was mainly editing in desktop view. I haven’t noticed this while editing templates so not sure if this is related to icon issue…
Browser: Chrome - 102.0.5005.115
I’m sorry you’re experiencing trouble with displaying icons.
Might I ask if this is happening posts, templates and template parts or more specifically the header part only?
Just to make sure: are you setting a specific icon for every icon block? The globe icon that appears by default will show on the backend but will not show on the frontend as it is a placeholder icon.
If the issue is other, could I possibly have temporary access to the server to see what is going wrong exactly?
Sorry for the inconvenience.
No worries - I should have said I’m pretty much a novice with Gutenberg & Cwicly so it’s likely to be user error, but I think I’ve found what the issue is…
In my recent test:
- I added an icon block to a section within the header part (I haven’t seen issue in template)
- In Primary tab, Icon is set to enabled, and changed the default icon to something else from Font Awesome collection
- I set icon PX as usually this value is reset once a new icon is selected so it can look like the icon is not there.
- I go into Design - Size - everything is blank as expected - click save.
- Icon still doesn’t show in header on website page.
This is what I think is happening:
- When adding the icon something is causing the editor to go into Tablet mode, and I’ve been too stupid to realise.
- So after checking the size settings everything looks ok, but that’s because it’s still in Tablet view. If select desktop view and check the size settings the width is set to “fit-content” - once I remove this the icon appears as it should on the live website.
Now I’m unable to replicate the editor switching between responsive views, so maybe it’s something unique in my env, but as I said in the original post I’ve seen this a few times but only when editing the header part so hopefully again it’s just something unique to me.
After discovering the elements I’ve found your social icons are much better than anything I can cobble together so I’m happy with these icons (see below) so no worries about investigating further.
Thanks again, David
Thank you for the detailed information.
I can’t seem able to reproduce this issue on my side.
Are you still experiencing this?
If yes, it would be helpful if you could send a temporary access to this website to email@example.com, so we can take a proper look at this bug.
Hi, maybe I can confirm. Have an icon in a div. The icon has padding to make the icon smaller (not optimal, but was temporary anyway). Now if the icon size is blank or fit-content, it will display perfectly in Firefox but not in Chrome. If the icon has a size it will show in both.
Hi @SymlDesigns and @T-low,
This should now be fixed in version 184.108.40.206.
Please let me know if this is the case on your end.
Once again, thank you for the report and sorry for the inconvenience.