Two problems after updating

[xoa]

Hello, after the recent update I discovered two problems to my site.

1. Envira gallery stopped partly from working, looks like java is not working anymore?

See here and here

The images won’t open in the lightbox, the layout is messed up, and there are no transition effects at all.

2. My Font Awesome Icons had became “bold” after the update. I can’t fix the width for the drop-down arrows for my main navigation at the top and for the social icons at the bottom of my page.

I’v tried
font-weight: 300!important;

but it does not affect the “fatness” of my icons.

Thanks for helping me out!

[Prasant]

Hello @xoa,

Thanks for asking.

1. I checked your website and Envira Gallery is working fine on my end. Please see screenshot.

2. Icons seems to loading fine. Here’s a screenshot.

Probably, you need to clear cache and try loading again.

Thanks.

[xoa]

Hello and thanks a lot for your reply.
Strange, Envira Gallery is now also working here. I even tried clearing the cache before.

For the second issue, I attached a screenshot of what I’d like to explain. As you see, the icons are way “fatter” on the left side. In the .css it says font-weight: 900; but it should be 300. When I change it to 300, the icons in the footer only show squares and the font-weight of the icons in my nav-bar at the top doesn’t change at all.

[ruenel]

Hello There,

The font awesome icons that is integrated in the theme is only 900 and 400. By default, the font wight 400 is being used. This is why even if you change the css to font-weight: 300; it does not work. Please be advised that the font weight 300 is exclusively available with Font Awesome Pro.
https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started

Screenshot

Screenshot

https://fontawesome.com/icons?d=gallery&s=light&m=pro

Hope this helps.

[xoa]

Thanks for your reply. But I still dont’t get it. All my font-awesome icons where “normal” before the latest Pro update, after the update they become “fat” and I can’t change them back to be “thinner”. (without adding any css code the where just as they should be).
Even using font-weight: 400; does not make any difference compared to font-weight: 900;

[rad]

Hi @xoa,

The font awesome is not different as it uses the latest font library. The font-weight 300 is now looking like that, you can see them here https://fontawesome.com/icons?from=io

The thin ones are part of font awesome pro, which of course, not free. Unfortunately, there is no news about the font awesome pro yet. What’s included are just standard icons that are free.

I’ll be adding this to our issue tracker for checking, there is no workaround since it’s already set in 300 weight (there is no 200 and 100).

Thanks!

[xoa]

That’s a pity. So basically it partly changed the look of my website (even it’s a minor thing) without the possibiliity to fix it. Besides paying for Font awesome pro?

[rad]

Hi @xoa,

I think you’re correct with paying for font awesome pro, but there is no official statement about it yet as it’s not currently included in the theme, just the free ones.

About the possibility, I tried many possible workarounds but thinning it out is not working since the icons are directly pulled from font files. And rendering is all decided by those loaded files. Changing the icon font size is a bit okay, but it still a bit thick, even adding font-weight: lighter!important; is not working.

But if you wish to change its font size, then you can add this CSS to your global custom CSS.

.x-navbar .desktop .x-nav li>a>span:after {
    font-size: 10px !important;
}
.x-social-global a i {
    font-size: 15px !important;
}

Thanks!