Closed webcompat-bot closed 4 years ago
It seems to not be working due to https://caniuse.com/#feat=link-rel-preload
<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" **onload="this.rel='stylesheet'"**\>
Thanks for the report! I'm able to reproduce the issue.
Tested with: Browser / Version: Firefox Nightly 73.0a1 (2019-12-15) Operating System: Windows 10 Pro
Moving to Needsdiagnosis.
This is on Chrome.
The code for the icon is loaded, but the actual icon is not displayed.
<div class="favorite-this-radio ng-scope" ng-controller="favoritesCtrl" data-stop-propagation="">
<p data-radio="3594" class="save-radio icon-list">
<span class="save-radio-icon">
<span class="fa-stack save fa-fw" data-track-click="Favorite Flow, Click to Favorite radio, Profile" ng-hide="isFavorited(3594)" ng-click="addAsFavorite(3594)" data-save="">
<i class="fa fa-heart-o fa-stack-2x"></i>
<i class="fa fa-heart fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-1x"></i>
<i class="fa fa-plus-circle fa-stack-1x"></i>
</span>
<i class="fa fa-spinner fa-spin fa-fw spinner" style="display:none;" data-working=""></i>
<span class="fa-stack saved fa-fw ng-hide" data-track-click="Favorite Flow, Click to Unfavorite radio, Profile" ng-show="isFavorited(3594)" ng-click="removeAsFavorite(3594)" data-saved="">
<i class="fa fa-heart-o fa-stack-2x"></i>
<i class="fa fa-heart fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-1x"></i>
<i class="fa fa-minus-circle fa-stack-1x"></i>
<i class="fa fa-check-circle fa-stack-1x"></i>
</span>
</span>
</p>
</div>
The font used for this is
font: normal normal normal 14px/1 FontAwesome;
This is defined in https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal
}
.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
}
On Firefox https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css is not downloaded at all.
Let's go check the JavaScript
<link rel="preload"
as="style"
href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
onload="this.rel='stylesheet'">
ah! This is a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1594449 which is fixing this, but is not yet enabled.
Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1594449
This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.
URL: https://streema.com/radios/RDP_Internacional
Browser / Version: Firefox 73.0 Operating System: Linux Tested Another Browser: Yes
Problem type: Site is not usable Description: "Add to favorite" heart does not appear to right of radio station name Steps to Reproduce:
Expected result:
There should be a red heart symbol with a plus sign superimposed on it.
This appears in Chromium. Copied the element from it here:
Browser Configuration
Console Messages:
From webcompat.com with ❤️