fontawesome icon will not shown in firefox / edge - font-awesome

I am using fontawesome icons.
Works fine in all browsers.
But one icon will not shown (only in safari)
<i class="far fa-times"></i>
Chrome / Edge:
Firefox:
Any idea why ? :(

Related

How to add a new icon from Font Awesome to an older version?

I have Font Awesome 4 on website.
I tried to add TikTok logo as following but it doesn't show up on website as tiktok logo support started in Font Awesome version 5.13.1:
<i class="fa fa-tiktok"></i>
Question:
How can I add one logo from newer Font Awesome versions while keeping old version 4? Thus avoiding to modify syntax from fa to fas across all the website?

Google chrome doesn't show icons of fontawesome

I am trying to put some font awesome icons on my site. But google chrome doesn't show icons of fontawesome.com
I have tested with other browsers, it works fine.
I have imported the link of fontawsome CDN in the head tag.
I have also put the tag of icons to show.
There's no adblocker and any extension that blocks icons.
I have tested with chromium browser, same problem with that browser.
I haven't used any extension for chromium.
Note: I am on the latest version of the Chrome browser and also imported the latest version of fontawesome.com
Chrome: Version 74.0.3729.169 (Official Build) (64-bit)
Font. version: 5.8.2
P.S.: It's working fine on another laptop of my friend, but not working in my mine. Please figure out the problem.
link
Here's the link of jsfiddle for code:
<!-- Font awesome 4 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<!-- The code for icon -->
<div class="icon-container">
<i class="icon far fa-gem"></i>
</div>
Please check the screenshots:
I'm using the same version of Chrome and that fiddle displays as expected (far-gem is shown). So I don't think it is a FA-issue or a Chrome-issue. Possibly some addins are causing trouble.
I had the same issue with icons not appearing on Google chrome on my mobile phone but worked fine on my laptop.
I solved the problem by clearing my browser cache. Have you tried this?
I don't know why my browser cache prevented icons from loading or if that could also be a problem for any of my site's visitors - if anyone can explain this, or has a way to ensure this issue doesn't affect my site's visitors, that would be really helpful.

Why does an I inside a span inside a button show up as IJ in Safari

I wrote the following code
<button>
<span style="font-weight:500;">I</span>
</button>
but when I run it on Safari I get a button with IJ instead of I written on it. It works just fine on Chrome.
Safari
Chrome
I've noticed this only happens when I have a span inside a button and the font-weight is exactly 500. This issue happens whenever there's an I, for example, if the button read TRY IT NOW it would show up in my Safari as TRY IJT NOW.
I'm running Safari 9.1 (10601.5.8.3).
Updating Safari to Version 9.1.1 (11601.6.17) fixes the bug.

FontAwesome not working

I'm trying to get FontAwesome to work on my site without Bootstrap. I've downloaded the font files and the CSS files bundled with them, and have changed the CSS file so that it points to the fonts on my server.
In the web inspectors of Chrome, Safari, and Firefox, I get no missing resource errors, and the links to both the CSS file and the fonts aren't broken.
The HTML I'm trying is
<i class="icon-cheveron-right"></i>Next
"Next" appears fine, but without so much as a blank space or offset for the icon. I've checked and double-checked the instructions on the FontAwesome site, but can't get the icons to display at all.
What am I missing here?
this worked for me. your code has an extra 'e' in chevron
<i class="icon-chevron-right"></i>Next

css inconsistency between chrome and safari

im having trouble with my css displaying correctly in both Chrome and Safari.
Because they are both webkit browsers i cant understand why.
My css positioning and div size displays perfectly in both FireFox and Safari but is all out of wak in chrome.
I have tried css reset but nothing seems to be working. Any ideas?
The website is here
www.girlsskateaustralia.com