Good day everyone! In short, the problem is this, there is a page, on it the font icons are fontawesome, the font itself is connected via CND

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

icons through pseudo-elements: after: before

 &:before content: '\f00c' color: #ffffff font-family: "FontAwesome", "Font Awesome 5 Free" margin-right: 10px font-weight: 100 font-size: 1.625em display: inline-block font-style: normal font-variant: normal text-rendering: auto -webkit-font-smoothing: antialiased

on windows are displayed in all browsers:

enter image description here

On Mac it is displayed in all browsers except Chrome (tested on different services)

enter image description here

In Chrome, ticks become such squares, the rest of the icons on the page, except for ticks, are rendered normally, did anyone encounter such a problem? Tell me how you can decide that the icon remains on the page font, thank you.

console error:

enter image description here

  • Are there any download errors in the console browser? - Dmitry Kozlov
  • yes, ajax-loader.gif: 1 how to fix? - Sergey Chugun 5:42 pm
  • Well, this is not related to the font. there is simply no gif of the loader or its path is incorrectly indicated - Dmitry Kozlov
  • With cdn you load css, and the font itself is loaded? - Dmitry Kozlov
  • I remind you that in all other browsers all icons are loaded, only the checkbox on MacOs does not work and only in chrome, from this we can conclude that the font is loaded exactly, but due to the fact that the path is not correctly specified - didn’t quite understand what the path was? and why then in other browsers and OS this way? - Sergey Chugun

1 answer 1

Most likely the problem is in the font-weight attribute. In the loadable css font files are indicated for font-weight:

  • normal
  • 400
  • 900

try to put in your style

 font-weight: normal
  • no, that's not the problem - Sergey Chugun 6:55 pm