Font Awesome Manager 1.2.7

[Kirby]

I am not using UI.X myself, but IIRC it just doesn't work:
If fa.css in your UI.X based styles is not reverted FAM most likely would not be able to apply the necessary modifications and thus the minimized CSS and subset font files would not be used - in worst case you would be loading the subset font files and the original ones.

Load a frontend page in one of your UI.X styles and check which .woff2 files are being loaded (via browser developer tools network tab) and check the output of rendered fa.css.
If rendered fa.css doesn't include whole FA css and if only -min.woff2 files are being loaded you should be fine, if not you might need to revert.

 

[El Porcharo]

Thanks for the quick reply and help, Kirby.

Not sure if this is what you mean:

​

But I don't see any fa.css in there, this is the only CSS being filtered:

​

Is that expected?

 

[Kirby]

Not sure if this is what you mean:

Yep - exaclty. Full FA solid, brands and regular are being loaded - additionally to subset brands and regular.
This is worse than not using FAM at all

But I don't see any fa.css in there, this is the only CSS being filtered:

The URL is truncated on the screenshot so I can't tell for sure, but I am pretty confident that fa.css is included there - take a careful look at the URL if it contains fa.css.

If it does, check the content - I am pretty sure it includes full FA CSS.

And I really wonder how you missed that - the setup routine gives a warning that has to be acknowledged if modified templates are detected

 

[El Porcharo]

I'll have a closer look tomorrow, but if you have some time to waste and what to check yourself it's here: http://open-my.link/FAM

Thanks for the info!

 

[Kirby]

Your fa.css has the full FA CSS as expected.

Your current setup is very inefficent (even worse than without FAM!) - you should either revert fa.css in UI.X styles or disable / uninstall FAM.

 

[El Porcharo]

I'll backup and try to revert the template (hope nothing gets broken then )

I assume this will need to be done on each style update, right?


(by the way... any chance you could edit your reply and mask the domain? )

 

[Anatoliy]

I'll backup and try to revert the template (hope nothing gets broken then )

I assume this will need to be done on each style update, right?


(by the way... any chance you could edit your reply and mask the domain? )

before you go, try do disable FAM and check in browser dev tools if your woff2 files load once or twice.
I guess there is a chance that FAM actually does his job done, but it just doesn't expect that sometimes it has to do it twice )

 

[El Porcharo]

"I" actually earned a lot of points in Google Page Speed, so I guess it's already doing something

I'll try this out later and let you know

 

[Anatoliy]

"I" actually earned a lot of points in Google Page Speed, so I guess it's already doing something

that's only makes stronger a theory, that you already have double amount of woff2 files before you installed FAM. )

 

[El Porcharo]

Right, first thing I can say is... I don't understand how I could have earned 30-40 points on Google Page Speed after setting up FAM.

I've just tested again after disabling both FAM and PyFtSubset and the score remained exactly the same (well, I actually got 4-5 points more this time )


Anyway, with all disabled, it looks like it's loading fewer files:

​

While after reverting fa.css for both iO and iO Dark Mode GPSpeed got me another 10 points more (from 66 to 76), but I've lost all icons in the main menu bar on the top... All other icons I set in UI seems ok.

But to me looks like that nothing changed on woff side after reverting fa.css:

​

@Kirby is there a way to rebuild all icons in use, so I can restore my main menu icons?

 

[Kirby]

I'll backup and try to revert the template (hope nothing gets

View attachment 270680

View attachment 270685​

@Kirby is there a way to rebuild all icons in use, so I can restore my main menu icons?

Carefully compare those screenshots - there is a significant difference.
The second screenshot looks fine (in regards of FA).

Easiest approach for missing icons: Enable option Automatically add missing icons, browse the site for a few minutes and disable it again once everything looks ok.

I wouldn't expect much improvement though with all the webfonts you are using (Montserrat, Lato, Roboto, Raleway, ...) - I'd try to get rid of them.

 

[Forsaken]

Right, first thing I can say is... I don't understand how I could have earned 30-40 points on Google Page Speed after setting up FAM.

I've just tested again after disabling both FAM and PyFtSubset and the score remained exactly the same (well, I actually got 4-5 points more this time )


Anyway, with all disabled, it looks like it's loading fewer files:

View attachment 270680​

While after reverting fa.css for both iO and iO Dark Mode GPSpeed got me another 10 points more (from 66 to 76), but I've lost all icons in the main menu bar on the top... All other icons I set in UI seems ok.

But to me looks like that nothing changed on woff side after reverting fa.css:

View attachment 270685​

@Kirby is there a way to rebuild all icons in use, so I can restore my main menu icons?

You should only use one, and if you really need it two Google webfonts. The only use case for two web fonts would be if you are using it for headings or things like flavor text in articles, otherwise you are adding unnecessary overhead.

If you really need to use multiple fonts, host them yourself but still use them sparingly.

 

[El Porcharo]

Yep, I use Lato for titles ant not sure if Montserrat or Raleway for normal text

Is there a way to check which fonts are used where, to get rid of the others?

 

[El Porcharo]

Easiest approach for missing icons: Enable option Automatically add missing icons, browse the site for a few minutes and disable it again once everything looks ok.

Looks like I got every icon back, except for the following (if I haven't missed any other):

• f788 (fa-layer-group) doesn't seem to be considered at all, it's just become invisible (so I've added it to the icon list in FAM options);
• f51c (chalkboard-user) which seems there is no way to restore it, since I get "icon is invalid" if I add it to the icons list as above;
• e065 (house-chimney-user) which is generating the same error as chalkboard-user above.

Any chance to force the rendering of chalkboard-user and house-chimney-user at all?

 

[Kirby]

Looks like I got every icon back, except for the following (if I haven't missed any other):

• f788 (fa-layer-group) doesn't seem to be considered at all, it's just become invisible (so I've added it to the icon list in FAM options);
• f51c (chalkboard-user) which seems there is no way to restore it, since I get "icon is invalid" if I add it to the icons list as above;
• e065 (house-chimney-user) which is generating the same error as chalkboard-user above.

Any chance to force the rendering of chalkboard-user and house-chimney-user at all?

There are no icons layer-group, chalkboard-user or house-chimney-user in FA 5, that's the reason why you are getting the error message.

However, there are icons with the same codepoints in FA 5: cash-register, chalkboard-teacher and house-user.

If FA icons are referenced by a name that does not exist in FA 5 "Automatically add missing icons" will fail (due to the icon being unknown).

 

[El Porcharo]

Strange thing is that those icons are "called" from my extra.less via Font Awesome Unicode number. I can't understand why is being missed by FAM, since they have the same Unicode number in both version...

 

[Kirby]

Please post the relevant CSS/LESS, HTML and a rebuild log.

 

[Dad.]

Regarding UI.X: In order to have a theme that used icons other than font awesome, and since there is no standard way to change icons, we had to do this "piggy back" method aka changing icons one by one via CSS.

@Kirby if you happen to have recommendations for what we could do to fix this to work better with your addon let me know. I know this is coming to 2.3 so not sure your level of investment at this point. But I'd happily support it if it's feasible.

 

[Kirby]

@Kirby if you happen to have recommendations for what we could do to fix this to work better with your addon let me know. I know this is coming to 2.3 so not sure your level of investment at this point. But I'd happily support it if it's feasible.

I already do have support for UI.X ready for 1.3.0 (which should be ready for beta testing soonish, but besides that:
You could just leave fa.css untouched and instead change helper_ja_global

<xf:set var="$cssUrls" value="{{ ['public:normalize.css', 'public:fa.css', 'public:core.less', $app . ':app.less'] }}" />

to smth. similar like

<xf:set var="$cssUrls" value="{{ ['public:normalize.css', 'public:uix_icons.css', 'public:core.less', $app . ':app.less'] }}" />

uix_icons.css

<xf:if is="{{ property('uix_iconFontFamily')}} == 'fontawesome'">
{{ include('fa.css') }}
</xf:if>
/** your UI.X stuff here **/

(I didn't actually test this, but theoretically this should work to keep maintain your "piggybacking" stuff and FAM compatibility)

 

[El Porcharo]

relevant CSS/LESS

    .userBanner.userBanner--docente {&:before {.m-faBase(); .m-faContent('\f51c'); color: #70c5ea; padding-right: 4px; font-size: 14px; font-weight:900;}}
    .userBanner.userBanner--appassionato {&:before {.m-faBase(); .m-faContent('\e1b0'); color: #777; padding-right: 4px; font-size: 12px; font-weight:900;}}    // \f406 user-alt    \e065 house-chimney-user

HTML

The layer-group icon is from the main menu on top bar (desktop version), so it's set in the public navigation setup in ACP.
While the two other missing icons comes from the user banner from 2 different groups, and here is the HTML from their user profile page.

User banner for Docente:

<div class="memberHeader-banners"> <em class="userBanner userBanner userBanner--docente"><span class="userBanner-before"></span><strong>Docente</strong><span class="userBanner-after"></span></em> </div>

User banner for Appassionato:

<div class="memberHeader-banners"> <em class="userBanner userBanner userBanner--appassionato"><span class="userBanner-before"></span><strong>Appassionato</strong><span class="userBanner-after"></span></em> </div>

rebuild log

Not sure that I got it right (roughly followed instructions here), but I have a bunch of it in the Server error log page: let me know in case.
Log text was too long for XenForo so I attached it to a TXT file.

Hope I didn't forget anything.

As always, thank you so much for your time, Kirby