Firefox 中的字体图标显示问题

Posted

技术标签:

【中文标题】Firefox 中的字体图标显示问题【英文标题】:Font icon display issue in Firefox 【发布时间】:2022-01-24 00:31:31 【问题描述】:

该图标在我的 Firefox 中不显示在中心,但在 Opera 中可以使用。

body 
    height: 100vh;
    display: grid;
    place-items: center;


.link 
    background-color: red;
    padding: 3px;
    display: grid;
    place-items: center;
    text-decoration: none;
    color: initial;


i 
    background-color: #fff;
    font-size: 2rem;
<head>
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
    <a href="#" class="link">
        <i class='bx bx-home'></i>
    </a>

您的 Firefox 是否遇到过以下问题?

This one is screenshot from Opera

And this one is Firefox

===================编辑====================

run code snippet in Firefox

run code snippet in Opera

我的 Firefox 版本是95.0.2(目前最新版本)。

如何在 Firefox 中解决此问题?

【问题讨论】:

【参考方案1】:

遗憾的是,我无法复制您的问题,但我建议您并排打开两个浏览器,打开您的开发工具,打开元素,然后您可以检查 css 属性以检查是否添加或缺少某些内容在 Firefox 中,您可能需要一些特定于 Firefox 的样式来解决问题。

就我个人而言,我没有与place-items 合作过,但在 caniuse.com 上查看它看起来应该不会给您带来任何问题。但可能值得遍历所有 html/css 以查看您是否使用了您正在使用的 Firefox 版本不支持的任何内容。

https://caniuse.com/?search=place-items

【讨论】:

以上是关于Firefox 中的字体图标显示问题的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Firefox 中显示 Font Awesome 图标?

角度 ui-grid 排序图标无法正确显示

无法显示字体真棒图标?

bootstrap中的font awesome图标在firefox下显示不正常

Firefox扩展程序,用于创建新图标或替换位置/地址栏中的现有图标

图标字体不显示一些图标