Некоторые значки FA отображаются в FF, Chrome и Safari, но ни один браузер не отображает их все

Я использую шаблон от Pixelarity (https://pixelarity.com/эфирный), где реализован шрифт awesome v4. Поскольку я также хотел бы использовать «бренды», мне нужно было подключить v5.

После попытки объединить CSS FA v5 с CSS шаблона что-то сломалось (я не CSS-Pro).

В частности, есть сетка из шести кругов, и каждый из них содержит значок. Firefox отображает пять из них, Chrome — три, а Safari — только один значок. На этом сайте также есть несколько значков меньшего размера (социальные сети), и только Firefox может отображать их правильно.

У меня действительно закончились идеи, и я надеюсь, что кто-то из вас сможет мне помочь.

Имхо, сейчас бесполезно предоставлять весь мой код, так как он также виден через инструменты разработчика в браузерах, я прав? Пожалуйста, дайте мне знать, если кому-то нужны конкретные строки из моего *.css или *.html

Заранее большое спасибо.

Все самое лучшее из Германии, Марсель

Обновлено:

Я сделал, как было предложено. Пытался устранить неполадки и воспроизвести, где ошибка может быть связана с использованием моего локального apache (Mamp на Mac). Боюсь, у меня до сих пор нет никакого объяснения, но, по крайней мере, я нашел некую закономерность в поведении браузера.

С моим fontawesome.css, содержащим следующие строки, он работает

• как шарм в firefox. Все значки отображаются правильно
• частично в сафари. Отображаются только значки из Font Awesome 5 Brands
• частично в хроме. Отображаются только значки из Font Awesome 5 Brands и Font Awesome 5 Free (solid)

  .sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.sr-only-focusable:active, .sr-only-focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/fa-brands-400.eot");
  src: url("../fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-brands-400.woff2") format("woff2"), url("../fonts/fa-brands-400.woff") format("woff"), url("../fonts/fa-brands-400.ttf") format("truetype"), url("../fonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;  
@font-face 
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/fa-brands-400.eot");
  src: url("../fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-brands-400.woff2") format("woff2"), url("../fonts/fa-brands-400.woff") format("woff"), url("../fonts/fa-brands-400.ttf") format("truetype"), url("../fonts/fa-brands-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; 
@font-face 
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/fa-regular-400.eot");
  src: url("../fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.woff") format("woff"), url("../fonts/fa-regular-400.ttf") format("truetype"), url("../fonts/fa-regular-400.svg#fontawesome") format("svg"); }

.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; 
@font-face 
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/fa-regular");
  src: url("../fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fa-solid-900.woff") format("woff"), url("../fonts/fa-solid-900.ttf") format("truetype"), url("../fonts/fa-solid-900.svg#fontawesome") format("svg"); }

Если я сейчас удалю .fas, .far и .fab, чтобы код выглядел следующим образом, он работает

• частично в фаерфоксе. Отображаются только значки из Font Awesome 5 Brands и Font Awesome 5 Free (solid).
• как шарм в сафари. Все значки отображаются правильно.
• частично в хроме. Отображаются только значки из Font Awesome 5 Brands и Font Awesome 5 Free (solid).

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.sr-only-focusable:active, .sr-only-focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/fa-brands-400.eot");
  src: url("../fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-brands-400.woff2") format("woff2"), url("../fonts/fa-brands-400.woff") format("woff"), url("../fonts/fa-brands-400.ttf") format("truetype"), url("../fonts/fa-brands-400.svg#fontawesome") format("svg"); }

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/fa-regular-400.eot");
  src: url("../fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.woff") format("woff"), url("../fonts/fa-regular-400.ttf") format("truetype"), url("../fonts/fa-regular-400.svg#fontawesome") format("svg"); }

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/fa-regular");
  src: url("../fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fa-solid-900.woff") format("woff"), url("../fonts/fa-solid-900.ttf") format("truetype"), url("../fonts/fa-solid-900.svg#fontawesome") format("svg"); }

Я следовал инструкциям с сайта fontawesome.com по включению всего шрифта в *.css страницы, а также трижды проверял пути к шрифтам.

Добавление скобки здесь и хром работает, удаление скобки там и сафари работает... Я полностью застрял и понятия не имею, что делать, так как я понятия не имею, почему три разных браузера ведут себя по-разному.