Firefox: FontAwesome Icons gone missing?

[Gazook89]

Hey, on my Docker build the font awesome icons are all missing, and console has a whole lotta this:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://use.fontawesome.com/releases/v5.15.1/webfonts/fa-solid-900.ttf. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

downloadable font: download failed (font-family: "Font Awesome 5 Free" style:normal weight:900 stretch:100 src index:3): bad URI or cross-site access not allowed source: https://use.fontawesome.com/releases/v5.15.1/webfonts/fa-solid-900.ttf
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://use.fontawesome.com/releases/v5.15.1/webfonts/fa-regular-400.ttf. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

downloadable font: download failed (font-family: "Font Awesome 5 Free" style:normal weight:400 stretch:100 src index:3): bad URI or cross-site access not allowed source: https://use.fontawesome.com/releases/v5.15.1/webfonts/fa-regular-400.ttf

I thought it was due to some changes to snippet bar I made on a branch, but having the same issue on my master branch that I haven't touched besides merging upstream/master into it. Also, it's ALL icons, not just in the snippet bar.

[ericscheid]

I saw a few cross-site cookie warnings for font-awesome the other day. They seem to have gone away now. I suspect a hiccup with them changing their hosting arrangement. Give it a day, see if issue persists.

[calculuschild]

@Gazook89 is this still an issue on the Docker stuff?

[Gazook89]

I found this question/answer on the mozilla forums regarding this. I was wrong when I opened this issue-- it's not a Docker thing, it's a Firefox thing and at the time it didn't even occur to me to try it in Chrome.

The above link offers a solution (changing a flag privacy.file_unique_origin to false) but that solution no longer works as of FF 95(?). I think the only solution now is to host the fontawesome icons we need directly on HB? I'm not sure how that works, but looks like you can download a subset/"kit" of their icons and just host like a font?

This is merely a local development with firefox issue, so not a big deal probably for most people, though I would appreciate it :)

[dbolack-ab]

The Proxying solution in #3501 could be leveraged here.

[Gazook89]

If we wanted to host the FA icons we are using, here is a list of those icons and where they are found. I wasn't sure if the FA website would tell you which icons you were actively using it, which would make it easy to turn into a 'kit' and download. I skipped .../fontAwesome.js and .../snippets.js for now. But here is everything else:

list of icons

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/admin/brewUtils/brewCleanup/brewCleanup.jsx
  47,22: fas fa-spin fa-spinner
  48,28: fas fa-times
  61,22: fas fa-spin fa-spinner

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/admin/brewUtils/brewCompress/brewCompress.jsx
  61,22: fas fa-spin fa-spinner
  62,28: fas fa-compress
  78,22: fas fa-spin fa-spinner

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/admin/brewUtils/stats/stats.jsx
  40,47: fas fa-spin fa-spinner

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/admin/admin.jsx
  32,20: fas fa-rocket

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/brewRenderer/errorBar/errorBar.jsx
  65,18: fas fa-exclamation-triangle

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx
  7,38: fas fa-times
  54,18: fas fa-info-circle 

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/brewRenderer/toolBar/toolBar.jsx
  72,159: fas fa-glasses
  95,20: fas fa-magnifying-glass-minus
  119,20: fas fa-magnifying-glass-plus
  131,20: fas fa-arrow-left
  157,20: fas fa-arrow-right

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/brewRenderer/brewRenderer.jsx
  123,18: fas fa-spinner fa-spin

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/editor/metadataEditor/metadataEditor.jsx
  158,19: fas fa-ban
  162,19: fas fa-globe
  174,20: fas fa-trash-alt
  224,78: fas fa-caret-down
  229,103: fas fa-caret-down
  337,23: fas fa-caret-right
  337,23: fas fa-caret-left

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/editor/snippetbar/snippetbar.jsx
  200,21: 					<i className={`fas fa-${index+1}`} />
  213,19: fas fa-compress-alt
  217,19: fas fa-expand-alt
  225,20: fas fa-clock-rotate-left
  230,20: fas fa-undo
  234,20: fas fa-redo
  241,20: fas fa-palette
  258,20: fas fa-info-circle
  286,22: fas fa-rocket
  303,20: fas fa-caret-right

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/navbar/account.navitem.jsx
  68,12: fas fa-user
  75,12: fas fa-beer
  82,12: fas fa-user
  90,12: fas fa-power-off
  101,40: fas fa-sign-in-alt
  108,109: fas fa-sign-in-alt

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/navbar/error-navitem.jsx
  38,50: fas fa-exclamation-triangle
  47,50: fas fa-exclamation-triangle
  56,50: fas fa-exclamation-triangle
  77,50: fas fa-exclamation-triangle
  86,50: fas fa-exclamation-triangle
  108,50: fas fa-exclamation-triangle
  119,49: fas fa-exclamation-triangle

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/navbar/help.navitem.jsx
  8,32: fas fa-question-circle
  11,31: fas fa-fw fa-bug
  21,33: fas fa-question-circle
  27,32: fas fa-fw fa-file-import

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/navbar/metadata.navitem.jsx
  80,26: fas fa-info-circle

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/navbar/navbar.jsx
  41,68: far fa-file-alt

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/navbar/patreon.navitem.jsx
  10,9: fas fa-heart

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/navbar/print.navitem.jsx
  6,67: far fa-file-pdf

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/navbar/recent.navitem.jsx
  150,123: fas fa-times
  169,20: fas fa-history

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/navbar/vault.navitem.jsx
  9,10: fas fa-dungeon

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/pages/accountPage/accountPage.jsx
  45,44: fas fa-user
  54,43: fab fa-google-drive

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
  55,18: fas fa-trash-alt
  68,18: fas fa-pencil-alt
  81,18: fas fa-share-alt
  94,18: fas fa-download
  137,21: fas fa-tags
  146,20: fas fa-user
  158,20: fas fa-eye
  162,21: far fa-file
  168,20: fas fa-sync-alt

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/pages/basePages/listPage/listPage.jsx
  179,19: fas fa-search

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/pages/editPage/editPage.jsx
  318,50: fas fa-exclamation-circle
  327,44: fas fa-spinner fa-spin
  330,77: fas fa-save
  364,50: fas fa-power-off
  364,78: fas fa-power-off
  406,35: fas fa-share-alt

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/pages/homePage/homePage.jsx
  129,32: fas fa-save
  133,35: fas fa-magic

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/pages/newPage/newPage.jsx
  193,27: fas fa-spinner fa-spin
  197,27: fas fa-save

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/pages/sharePage/sharePage.jsx
  71,42: fas fa-pencil-alt
  98,36: fas fa-code
  101,37: fas fa-eye
  105,37: fas fa-download
  108,37: fas fa-clone

/Users/JohnJones/Documents/Programming/Projects/homebrewery/client/homebrew/pages/vaultPage/vaultPage.jsx
  231,31: fas fa-search
  231,57: fas fa-search

/Users/JohnJones/Documents/Programming/Projects/homebrewery/shared/homebrewery/renderWarnings/renderWarnings.jsx
  49,38: fas fa-times dismiss
  52,18: fas fa-exclamation-triangle

/Users/JohnJones/Documents/Programming/Projects/homebrewery/shared/naturalcrit/splitPane/splitPane.jsx
  63,19: fas fa-arrow-left
  67,19: fas fa-arrow-right
  71,51: fas fa-unlock
  71,67: fas fa-unlock
  80,19: fas fa-circle
  81,19: fas fa-circle
  82,19: fas fa-circle

Here is a list of only unique icon names:

list of unique icons

fas fa-spin fa-spinner
fas fa-times
fas fa-compress
fas fa-exclamation-triangle
fas fa-rocket
fas fa-info-circle
fas fa-glasses
fas fa-magnifying-glass-minus
fas fa-magnifying-glass-plus
fas fa-arrow-left
fas fa-arrow-right
fas fa-ban
fas fa-globe
fas fa-trash-alt
fas fa-caret-down
fas fa-caret-right
fas fa-caret-left
fas fa-compress-alt
fas fa-expand-alt
fas fa-clock-rotate-left
fas fa-undo
fas fa-redo
fas fa-palette
fas fa-user
fas fa-beer
fas fa-power-off
fas fa-sign-in-alt
far fa-file-alt
fas fa-question-circle
fas fa-fw fa-bug
fas fa-fw fa-file-import
far fa-file-pdf
fas fa-history
fas fa-dungeon
fab fa-google-drive
fas fa-pencil-alt
fas fa-share-alt
fas fa-download
fas fa-tags
fas fa-eye
far fa-file
fas fa-sync-alt
fas fa-search
fas fa-exclamation-circle
fas fa-save
fas fa-magic
fas fa-code
fas fa-clone
fas fa-unlock
fas fa-circle

[calculuschild]

Reminder: we are already providing all the font awesome icons as emojis. If we are going to self host the font, might as well self-host the whole set so emojis will also work for firefox people.

Let's not shard the font-awesome icons into partially self-hosted and partially remote.

[Gazook89]

Ah, right, i forget about the emojis. I know we've talked about it, but apparently only on gitter (or at least not in this thread). Thanks for reminder.

In which case, it should be even easier.