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工作...我完全受阻,不知道该怎么做,因为我不知道为什么三个不同的浏览器以这种不同的方式表现。
html safari图片不显示,html - 某些FA图标显示在FF,Chrome和Safari中,但没有浏览器会全部显示它们 - 堆栈内存溢出...相关推荐
- html图片按页码显示,html - 在打印html文档时显示页码 - 堆栈内存溢出
几个月前,当我使用以下代码在浏览器(firefox)中打印HTML文档时,能够显示页码: body { width: 300px; counter-reset: page; } #header { b ...
- html左浮动不管用图片往下放,html - 如何在HTML / CSS中水平对齐图像(浮动和显示内联块不起作用) - 堆栈内存溢出...
我有一个水平排列的图像库,但是后来我做到了,以便当您将鼠标悬停在图像上时,图像上会覆盖文字,现在我以前没有什么东西可以用来使它们水平排列. 我尝试在所有选择器上使用左浮点数(同样使用display i ...
- qt客户端显示服务器发送的图片,c++ - Qt客户端服务器应用程序“发送图像”出现问题 - 堆栈内存溢出...
我正在尝试通过QDataStream从客户端向服务器发送图像( OpenCV Mat ). 第一项是int,即缓冲区的大小. 它可以处理10到15张图片,然后服务器读取第一个int随机数(通常〜2 ^ ...
- python中color的用法_python - 如何为热图(使用plt.pcolor创建)中的NaN单元分配特定的颜色或图案,并使其显示在颜色栏中(图colorbar) - 堆栈内存溢出...
我生成了一个热图 , 该热图在右下角的单元格中缺少值(白色,但是与其他淡紫色的单元格没有明显区别). 我想使用特定的颜色或图案来突出显示此单元格,并提到这种颜色/图案与颜色栏或图例中某处的缺失值相关联 ...
- Linux中httpd353错误,linux - 由于控制进程退出并显示错误代码,因此httpd.service的作业失败 - 堆栈内存溢出...
更改00-nova-placement-api.conf ,我正在虚拟机中研究00-nova-placement-api.conf , 我想重启httpd : systemctl restart ht ...
- python以二进制读取的文件显示b'b'_python - Python读取二进制文件并解码 - 堆栈内存溢出...
字节数组 字节数组是可变的字节序列(整数,其中0≤x≤255). 您可以从字符串(如果不是字节字符串,则必须提供编码),字节大小的整数的可迭代对象或带有缓冲区接口的对象构造字节数组. 当然,您也可以手 ...
- java中图片与像素矩阵转换,java - Java中具有矩阵乘法的图片转换不起作用 - 堆栈内存溢出...
我正在用Java实现图片转换. 到目前为止,我已经实现了以下类: 矩阵 (持有一个3x3矩阵,该矩阵将用于与Vector相乘) 向量 (用于与变换矩阵相乘以生成原始图像像素的新位置) PictureT ...
- 网页读不出php语句,php - phpmyadmin显示代码而不是网页 - 堆栈内存溢出
我正在将发行版从kali(heheyy)升级到sid. 但是,当我设置我的Web服务器时,我重新安装了apache2,php,mysql等,但是当我访问localhost/phpmyadmin时出现此 ...
- android imageview图片崩溃,android - setImageResource导致应用程序崩溃 - 堆栈内存溢出...
我试图做一个按钮,当单击它时会从一组卡中选择一个随机卡,并将其显示到ImageView中. 为此,我为它们的值和ID(可绘制的图像卡名称)提供了一个Card类. public class Carte ...
最新文章
- PowerDesigner生成数据库
- @2021高考生,用 Python 分析专业“钱景”
- 从硬盘上装xp手记(2005.8.14 )
- 转载:二叉树的前中后和层序遍历详细图解(递归和非递归写法)
- 正经炼丹师如何完美安排国庆长假?| 假期专属论文清单
- linux中脚本退出函数,Linux 命令 shell 脚本之09(函数)
- 【Solr】 solr对拼音搜索和拼音首字母搜索的支持
- A*算法在最短路问题的应用及其使用举例
- python实现常见排序算法
- php代理m3u8,PHP实现m3u8并发下载
- 计算型存储:异构计算的下一个关键应用
- t–sql pl–sql_T-SQL for DBA –使用T-SQL进行快速数据分析的三种方法
- myeclipse的优化
- SQL2005创建快照
- OGRE: OgreOverlaySystem.h: No such file or directory
- 文档数据库mongodb与列式数据库hbase详细比较
- DataSource
- 自增约束(auto_increment)
- 快递单号查询免费api接口(PHP示例)
- xampp中MySQL启动错误问题
热门文章
- 4x root 红米_红米4X root教程_红米4X卡刷root包来获取root权限的方法
- 带轮轮毂长度l和带轮宽b表_A型V带轮的轮缘宽B,轮毂孔径D和轮毂长L.doc
- Lock锁及获取锁的四种方法
- 3. 投票 案例项目(合集)
- 德国奇葩经历之护照丢失
- 基于Python的信用评分卡建模分析
- 当贝F5和坚果J10S色彩实拍对比,终究是徕卡错付了
- 计算机图形学空间曲线,课程追忆之《计算机图形学》【曲线曲面篇】
- iOS开发,这样写简历才能获得大厂青睐
- 【推荐】1657- 灵活可扩展,2023年值得尝试的13款富文本编辑器