如何修复手机/chrome 上不显示的字体真棒图标？

Question

<i class="fa fa-laptop-code large-icon"></i>

我使用这个 html 代码作为 font Awesome 图标，它在桌面上完美显示，问题仅在于移动视图。**

Answer 1

当我尝试使用 CSS 文件夹中的

all.css

文件自行托管 font Awesome 图标并将其导入 HTML 页面时，我遇到了同样的问题。我通过导入 font Awesome CDN 链接而不是使用

all.css

文件解决了这个问题。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">

Answer 2

奇怪的是，将随机查询字符串添加到我的很棒的 cdn 链接（例如：?v=7857324）对我有用。看起来在我的例子中，我只需要为我的用户强制重新加载文件..

来自

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

到

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css?v=7857324">

Answer 3

可能出现的问题1

您正在使用

<i class="fa fa-laptop-code large-icon"></i>

如果您使用的是最新版本的 font-awesome，那么很可能

<i class="fas fa-laptop-code"></i>

尝试降级您的版本或将您的课程更新为“fas”

可能出现的问题2

检查您的移动视图是否有任何仅存在于移动视图上的 CSS，例如

@media screen and (max-width:600px){

}

Answer 4

此问题主要发生在您使用过时的 Font Awesome CDN 时。尝试使用他们网站上的最新版本。

希望这会起作用。

Answer 5

对我来说这有效：

我使用的是官方的 fontawesome CDN。所以我把目前的一个改成了他们官方网站上的一个 privide for fontawesome ：

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

Answer 6

对于仍然坚持这个问题的其他人，我尝试切换到 FontAwesome 的新 SVG 框架（来自 Web Fonts），问题似乎已经消失了。

我遇到了同样的问题，我的所有图标都在桌面上正常渲染，但有一些图标在移动浏览器上无法渲染。

Answer 7

确保您的手机已连接到互联网