html safari图片不显示,html - 某些FA图标显示在FF，Chrome和Safari中，但没有浏览器会全部显示它们 - 堆栈内存溢出...

我正在使用Pixelarity( https://pixelarity.com/ethereal )的模板，其中他们实现了超赞的v4字体。 由于我也想使用“品牌”，因此我需要连接v5。

在尝试将FA v5 CSS与模板的CSS结合后，它以某种方式破裂(我不是CSS-Pro)。

特别是有六个圆圈的网格，每个圆圈都包含一个图标。 Firefox显示其中五个，Chrome显示其中三个，而Safari仅显示一个图标。 该网站上也有几个较小的图标(社交媒体)，只有Firefox能够正确显示它们。

我的想法真的用光了，希望你们中的一些人能够帮助我。

恕我直言，现在提供所有代码都无济于事，因为它也可以通过浏览器中的开发人员工具看到，是吗？ 请让我知道是否有人需要我的* .css或* .html中的特定行

提前非常感谢您。

来自德国，Marcel的一切都好

编辑：

我按照建议做了。 尝试对可能使用我的本地apache(在Mac上为Mamp)的错误进行重现并进行故障排除。 恐怕我仍然没有任何解释，但是至少我在浏览器的行为中找到了一种模式。

与我的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 ，那么代码如下所示，它可以正常工作

部分在Firefox中。 仅显示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中，并且还对字体的路径进行了三重检查。

在此处添加括号和chrome可以正常工作，在此处删除括号并可以进行safari工作...我完全受阻，不知道该怎么做，因为我不知道为什么三个不同的浏览器以这种不同的方式表现。