6.4.0: FA icons changed after the update

Beta
#1

Hi @charlie!

The new update is amazing in all areas! Can’t wait to test more!

I created a staging copy of one of the websites and installed Beta1 on it.

As soon as I installed Beta, this icon:
image

Turned into this one:
image

So that was without going into Theme options and changing the Load type globally. It just happened right after the update. The icon is part of the button graphic, if that helps.

Let’s inspect the actual button graphic controls:
image

So it says “SVG”. I think the intention was to keep all icons at Webfont by default, but this one switched to SVG just by updating the theme.

In addition, the Icon shown in the control isn’t matching the icon shown on the page.

Let’s switch it back to “Webfont”.

That’s interesting, now it show like this on the page:
image

That’s clearly not the icon that was originally on the page before the update.

I can select the icon from the list and get it back manually, but there is another issue here. It seems like many icons are missing:
image

Not sure what is going on here. On another site, icons look OK. I guess the best thing here would be to give you access to this staging site. You can find it in the secure note.

Thanks!

#2

I can report I have seen similar things on the one website I have beta installed on, but in two different ways.

In the footer I had a LinkedIn logo - the version with the square background. When beta was installed, the icon became an SVG with a border and the logo oversized so it merged with the border. Simple enough to correct by changing the icon size and altering the colors, but unexpected.

On a page I have a slider (see screenshot) where the icon remained as a Webfont, but displays differently from
Inspector preview to what is showing on the page itself, like @Misho has reported. No great problem in this case, but it could cause problems with clients if they find “unapproved” icon styling after the update.

2023-10-06_11-22-27
2023-10-06_11-22-27981×710 111 KB

I think the SVGs are great, but I am a little concerned that when Pro 6.4 is released that there could be a lot of work needed to check and correct icons used across each website, if this behaviour persists.

Thanks,
Christopher

1 Like
#3

Hey thanks for testing the Beta.

For the missing icon one. I think it’s a cache thing where FA 5 is still cached on your end. Next beta we’re going to start sending versioning info in the webfont files, and that’ll fix that in the upgrade process whenever we update Font Awesome again. The App uses webfonts for clarification.

This arrow one was pretty peculiar. The shims for FA5 say to use the outlined arrow you guys see. However the aliases say to use another icon which actually looks like the FA5 icon. I’ll change this to use the better icon. There were a couple like this, mostly related to arrows and chart icons. I’ll update in beta2.

Linkedin is also saying to use the new logo, even when they supply the old logo. I’m guessing for brands, the shims is to use the standard icon. I think I need to add a theme option to not use the shims, they are definitely needed though when upgrading from FA5 on your site. @whitemedia did the element styling get messed up too or was it just an icon change?

#4

Hi @charlie,

The icon element on the page held its styling. It was just the icon which changed.

In the footer, the LinkedIn icon was totally messed up with its styling. I have just tried it on another staging website and these are the before and after results:

BEFORE UPDATE TO BETA 6.4.0.
2023-10-06_15-51-39

AFTER UPDATE
2023-10-06_15-53-43

All icons are SVG after the update and all look good apart from the LinkedIn one. To get it back to the original styling takes a little manual re-styling to give it a background and the better sizing.

The first website I updated with Beta 6.4.0 had used the same icon as in the “before” screenshot above, but it was in full color. After the update I got the same “after” icon as above, but it had a border which touched the dot of the “i” and skimmed the rest of the lettering. This second site seems to have fared better.

Thanks,
Christopher

#5

Okay thanks for the info. Yeah I’m not sure why their shim file works this way, but it tries to push you into different logos when it comes to brands. I’ll set it up to ignore this part, when the old logo still exists.

1 Like
#6

Hi @charlie,

I have found another Font Awesome to SVG conversion which has not quite gone right. In this case, the website was updated from Pro 6.3.9 to Beta 2 (without Beta 1).

The icon is the phone-alt. Before the update, the icon was the mirror image of the screenshot below (i.e. the handset goes from top left to bottom right). The update converted the icon to what you see in the screenshot.

2023-10-12_11-56-00

I hope this is useful.

Thanks,
Christopher

#7

It is useful, however from what I can tell the icons are indeed flipped in FA6. phone is now the version you are looking for. phone-alt is now phone-flip.

https://fontawesome.com/icons/phone?f=classic&s=solid FA6
https://fontawesome.com/v5/icons/phone?f=classic&s=solid FA5

1 Like