v6 - Safari Only - Font Awesome icons in table headers are boxes now

[snipe]

Debug mode

• I have enabled debug mode
• I have read checked the Common Issues page

Describe the bug

We have had to upgrade several of the JS and CSS libraries we use, and suddenly the Font Awesome icons are broken, but only in the table headers.

The way this was working before (and should still be but is not) is that we set a css style in the Presenter, for example the CategoryPresenter:

snipe-it/app/Presenters/CategoryPresenter.php

Lines 57 to 65 in fde5c6c

	], [
	'field' => 'checkin_email',
	'searchable' => false,
	'sortable' => true,
	'class' => 'css-envelope',
	'title' => 'Send Email',
	'visible' => true,
	'formatter' => 'trueFalseFormatter',
	], [

Then in the resources/assets/less/overrides.less file, we set some styles for the icon headers themselves:

snipe-it/resources/assets/less/overrides.less

Lines 567 to 593 in fde5c6c

	th.css-barcode > .th-inner,
	th.css-license > .th-inner,
	th.css-consumable > .th-inner,
	th.css-envelope > .th-inner,
	th.css-accessory > .th-inner
	{
	font-size: 0px;
	line-height: 4!important;
	text-align: left;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}
	th.css-padlock > .th-inner::before,
	th.css-barcode > .th-inner::before,
	th.css-license > .th-inner::before,
	th.css-consumable > .th-inner::before,
	th.css-envelope > .th-inner::before,
	th.css-accessory > .th-inner::before
	{
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: 20px;
	}

And then the one for the specific CSS class we're trying to use, in this example, the envelope icon:

snipe-it/resources/assets/less/overrides.less

Lines 616 to 619 in fde5c6c

	th.css-envelope > .th-inner::before
	{
	content: "\f0e0";
	}

That code used there corresponds with the Font Awesome's code number: f0e0

Reproduction steps

Go to any of the pages that use icons as the table header, see empty boxes where icons used to be.

Expected behavior

Go to any of the pages that use icons as the table header, see icons as the table header.

Screenshots

v6:

v5:

Snipe-IT Version

v6-pre-alpha - build 6566

Operating System

MacOS

Web Server

Apache

PHP Version

7.4

Operating System

MacOS

Browser

Safari - works normally on Chrome, Edge, Brave, etc

Version

No response

Device

No response

Operating System

No response

Browser

No response

Version

No response

Error messages

No response

Additional context

No response

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[snipe]

Thanks for opening your first issue here!

Uhhh, wat? I'm the maintainer. Bad bot.