字体真棒显示方形而不是图标
Posted
技术标签:
【中文标题】字体真棒显示方形而不是图标【英文标题】：Font-awesome showing square instead icon 【发布时间】：2018-02-12 21:39:15 【问题描述】：我需要将字体系列更改为我拥有的某个 DropDownList，图标是可见的，直到我更改字体系列。我选择的每个字体系列都不适用于图标，所以我总是看到一个正方形，我该如何解决？
谢谢
【问题讨论】：
能否分享源代码？ 很可能你想使用你包含的字体真棒库中不存在的图标，你必须向我们展示代码 检查您的控制台是否有 404 错误，可能是您没有正确链接到字体。 Font Awesome 库使用一种特殊字体，所有图标都存在。将字体更改为系统字体很可能会导致图标丢失，因为它们不支持。 【参考方案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】：
<i>标签，优先使用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">
完全像这样使用图标：<i class="fa fa-address-book" aria-hidden="true"></i>，不多也不少，中间没有，不要将<i> 更改为<span> 或更改为font-family。如果您想更新颜色、样式，我建议向其中添加新类并以这种方式更新。
【讨论】：
opensource.keycdn.com seems to be down!以上是关于字体真棒显示方形而不是图标的主要内容，如果未能解决你的问题，请参考以下文章