eventide017
commented
3 months ago Error seems to be site-related. They used Font Awesome 4.7.0 (as you can see in /assets/iconfonts/font-awesome/css/font-awesome.min.css file, then for some reason tried to move to Font Awesome 5, but didn't implement it properly. In /assets/css/style.css?v=OUovYecavVzBdYbZPecvJQSXuzkldVs3pqpd0Bmrpbc there is a lines coming from _/assets/css/template/_chat.scss:
.fa, .far, .fas { font-family: "Font Awesome 5 Free"; }
This font does not exist anywhere on site server. However, in Font Awesome 4.7.0, .fa style is set by /assets/iconfonts/font-awesome/css/font-awesome.min.css_:
.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
It sets font-family to be FontAwesome, which exists on site server.
For example, icon for Login with Steam button is:
<i class="fa fa-steam">::before</i> and it displays \f1b6 symbol from .fa-steam:before { content: "\f1b6" } in font-awesome.min.css mentioned before.
But when you enable this extension, it reads .fa, .far, .fas { font-family: "Font Awesome 5 Free"; } and creates a new internal css style based on it:
.fa, .far, .fas { font-family: 'Twemoji Country Flags', "Font Awesome 5 Free" !important; }
As internal css overwrites external css, this is the one used on pages. It first tries to use Twemoji Country Flags font (where there are no symbols for Font Awesome icons), then Font Awesome 5 Free font (which do not exist) and then default font (where there are also no symbols for Font Awesome icons). The existing FontAwesome font is not used with this extension turned on.
But I also encountered another FontAwesome with this extension. It breaks FontAwesome icons on https://interpals.net/ pages like search and profile. Unfortunately you can't see any icons when you are not logged in, so here is the screenshot:
Cause of this problem is similar. Inside webpack://interpals-legacy/public/css/interpals/styles.css there is a lines:
strong, em, b, i { font-family: Verdana; }
This extension makes internal css:
strong, em, b, i { font-family: 'Twemoji Country Flags', Verdana !important; }
Here !important rule makes it have higher priority than .fa style font-family: FontAwesome; property. So it tries Twemoji Country Flags font, then Verdana font and then default font, but not the FontAwesome font.
I fixed this by making an edit in content.js of this extension and loading it as unpacked in developer mode, but this is probably very bad fix and shouldn't be used.
content.js, default line 60:
style.textContent += `${rule.selectorText} { font-family: '${replacementFontName}', ${rule.fontFamily} !important; }\n`;
And badly fixed version of line 60:
style.textContent += `${rule.selectorText} { font-family: '${replacementFontName}', 'FontAwesome', ${rule.fontFamily} !important; }\n`;
This makes extension add FontAwesome every time it adds Twemoji Country Flags, but this way it adds additional font where it is not used and where it doesn't even exist.
It probably can by done better by looking for specific Unicode character ranges on page and adding FontAwesome only where Private Use Area block characters is (Font Awesome uses this). Probably the same can be done with country flags too, with Regional Indicator symbols ranges. But I'm pretty bad at coding and unsure if I can implement this.
Describe the bug Having the extension enabled breaks fontawesome icon in a scenario i experienced today
To Reproduce Steps to reproduce the behavior:
Screenshots extension enabled:
extension disabled:
Chrome version: Chromium 123.0.6312.124
Additional context