字体真棒显示方形而不是图标答案

【问题标题】：Font-awesome showing square instead icon字体真棒显示方形而不是图标
【发布时间】：2018-02-12 21:39:15
【问题描述】：

我需要将字体系列更改为我拥有的某个 DropDownList，图标是可见的，直到我更改字体系列。我选择的每个字体系列都不适用于图标，所以我总是看到一个正方形，我该如何解决？

谢谢

【问题讨论】：

能否分享源代码？
很可能你想使用你包含的字体真棒库中不存在的图标，你必须向我们展示代码
检查您的控制台是否有 404 错误，可能是您没有正确链接到字体。
Font Awesome 库使用一种特殊字体，所有图标都存在。将字体更改为系统字体很可能会导致图标丢失，因为它们不支持。

标签： html css font-awesome bootstrap-4

【解决方案1】：

我遇到了这个问题，并将原因追溯到一些被归类为"brand icons"的图标。

在我的例子中，font awesome 的“实心图标”工作得很好，但是我使用的任何“品牌图标”都呈现为矩形。我通过使用“all”字体很棒的 CSS 文件解决了这个问题：

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

除了在使用品牌图标的地方将 fa 类替换为 fab 之外：

<i class="fab fa-youtube"></i>

希望这对某人有所帮助！

【讨论】：

【解决方案2】：

试试 www.yourwebsite.com。据我说，这是由于 HTTP 因此，您必须通过 C 面板 (HTTPS) 确保您的网站安全。

【讨论】：

请多解释。对我来说，找出您的答案与问题中描述的问题之间的关系有些困难。

【解决方案3】：

也可能是您使用的链接。一些图标来自较新版本，不适用于存储库的旧链接。

确保您使用的 CDN 是最新的。

【讨论】：

【解决方案4】：

标签，优先使用FontAwesome font-family

body * {
font-family:'tahoma'!important;
}

body i {
font-family:'FontAwesome'!important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa fa-male"></span> <span>Male</span> 
<br>
<span class="fa fa-female"></span> <span>Female</span>
<hr>
<i class="fa fa-male"></i> <span>Male</span> 
<br>
<i class="fa fa-female"></i> <span>Female</span>

【讨论】：

【解决方案5】：

在您的<head> 标签中包含令人敬畏的字体，例如<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
完全像这样使用图标：，不多也不少，中间没有，不要将 更改为 或更改为font-family。如果您想更新颜色、样式，我建议向其中添加新类并以这种方式更新。

【讨论】：

opensource.keycdn.com seems to be down!