Unable to display icon blocks in header part


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.

Thanks, David

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…

WordPress: 6.0.1
Cwicly: 1.1.9
Browser: Chrome - 102.0.5005.115

1 Like

Hello @SymlDesigns,

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.

Hi Louis,

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

Hi @SymlDesigns,

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 support@cwicly.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.

WordPress: 6.0.2

Hi @SymlDesigns and @T-low,

This should now be fixed in version​

Please let me know if this is the case on your end.​

Once again, thank you for the report and sorry for the inconvenience.​

Hey there Araminta. I emailed a similar issue to support as @SymlDesigns shared, but thought I’d bring it here for the good of the group.

I’m using the Themer Child Theme. When editing the header template in Themes > Parts > Header, icons and buttons disappear when viewing on the Index Template. For example, if my header is built with four elements. . .logo, button, icon, nav. . .spaced-evenly in the section’s container, the button and icon aren’t visible when testing the page in the browser. There are no visibility conditions on it. Any ideas what might be going on?