Pencil Icon Broken after automatic X Theme update

Support
#1

It looks like the font awesome icon isn’t showing up for just one icon: the pencil icon for Authors.

Cleared site cache in Litespeed, cleared browser cache, tried a different browser, still broken. Any way to fix this?

#2

I found that this was a problem with the functions.php file I downloaded from the X Theme Child Theme repo. Seems to fix the issue and I don’t think I needed to edit the original functions.php in the X Child Theme. So I just overwrote it. Is there a process required when updating X to make sure the X Child Theme will work correctly? Should I have been updating the X Child Theme files with X Theme updates? Thanks.

#3

Hey there,

Thanks for writing around! I tested the icon for authors in my local setup and it’s displaying fine on my end (see screenshot)

You may have customization in your Child Theme with old mark-up which is preventing the icon to show up. Switch to parent theme and see if this resolves the issue, make sure to clear all caches after the switch.

Let us knw how this goes!

#4

Hi - sorry to hijack this thread but I’ve also got a missing pencil icon for the Author credit, but it’s only been missing since adding the following CSS to mitigate the Font Awesome bug:

[data-x-icon-o], [data-x-icon-s], [data-x-icon-b], [data-x-icon], [class*=“x-icon-”] {
font-weight: 400 !important;
}

The pencil icon returns as I toggle “font-weight: 400 !important;” on and off in Chrome dev tools.

[update] Seems to be an issue with Firefox and Chrome - Safari displays the pencil without issues

Please advise.

#5

Hi @KEXINO,

Thanks for reaching out, may I know which site has this issue? I see multiple sites from your account and I’m not sure which one you’re currently working on.

Thanks!

#6

Take a look at https://kexino.com/small-business/marketing-campaign-digital/ as an example.

#7

Hi There,

This issue occurs because of this custom CSS:

[data-x-icon-o],
[data-x-icon-s],
[data-x-icon-b],
[data-x-icon],
[class*="x-icon-"]{
font-weight:400 !important;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

Please find and remove it under Theme Options > CSS.

Let us know how it goes!

#8

I know why the issue occurs. Did you read the thread?

If I remove this CSS then all Font Awesome icons display at font-weight:900. This is a known bug.

You guys have acknowledged the bug HERE HERE and HERE.

#9

Hey @KEXINO,

To fix this for now, only target the pencil icon and set the font-weight to 900 like this:

body .x-icon-pencil {
    font-weight: 900 !important;
}

Hope that helps.

#10

Great - that works. Thanks.

Do you have an ETA when the next update will drop that addresses this bug?

#11

Hello @KEXINO,

Thanks for updating the thread.

Unfortunately, I am not in a position to share ETA with you but I encourage you to take a look at following post wherein @kyle has shared the future roadmap.

Thanks for understanding.

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.