Fontawesome 图标显示在桌面上但不在移动设备上

Posted 2023-04-13

【中文标题】Fontawesome 图标显示在桌面上但不在移动设备上

【英文标题】：Fontawesome Icons showing on desktop but not on mobile

【发布时间】：2021-02-13 12:52:22

【问题描述】：

我的 fontawesome 图标显示在我的桌面版 Chrome 应用程序的选择列表中，但在我的移动版 (Galaxy S7) 上，我看到了方框、奇怪的符号和偶尔出现的日文字符。我已经阅读了大约 30 篇文章说将字体粗细设置为 900，但这当然没有帮助。

字体好像不见了？但是为什么它可以在桌面版本上运行，而不能在移动设备上运行呢？我正在使用 fontawesome 5.5.0 和 cloudfare CDN。我正在运行 .net core 3.1。

任何帮助将不胜感激。谢谢！

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.5.0/css/all.min.css' rel="stylesheet" />

<select class="text-info border-0 fa fa-select fa-2x " id="Icon" name="Icon"><option class="fa-select" value="@Model.Icons[i].Id">@html.Raw(Model.Icons[i].UnicodeWithHTML)</option></select>

这是我的 CSS。

.fa-选择 font-family: 'Font Awesome 5 Free'、'Font Awesome 5 Brands'、'Font Awesome 5 Free Solid'； 字体粗细：400；

【问题讨论】：

问：“桌面版”是您在 Chrome 浏览器中显示的带有 Razor 页面的 C# ASP.Net Core 应用程序吗？ “手机版”究竟是什么？

感谢您的回复。我正在使用这个引导模板 - wrapbootstrap.com/theme/…

是的，它是一个 C# ASP.Net Core 应用程序，带有 Razor 页面...使用上面的引导模板。

【参考方案1】：

所以我发现 android 和 ios 弹出框显然不支持 @font-family css，因此无法在弹出框中正确显示 fontawesome 图标。最终，我最终使用了一个引导按钮来切换面板以供选择，从而将其全部保留在浏览器的 HTML 部分中。

【讨论】：

愚蠢的问题：我只在 Visual Studio 中创建了一个 .Net Core Web 应用程序，将其部署到 IIS，并在我的 Windows 桌面上的 Web 浏览器（例如 Chrome）中显示它。问：您是否为移动设备构建了“不同”的应用程序，或者它只是部署到 Web 服务器的普通旧 .Net Core Web 应用程序？问：您是否通过使用 Firefox 或 Chrome (Android) 或 Safari (IOS) 浏览到 URL 来显示？或者您是否在您的手机上部署了某种“移动客户端”？您没有创建单独的 Xamarin 或 Power BI 应用程序，对吗？我很好奇……