logo标签列表

字体图标库font-awesome显示方块而非图标

htmlcssfont-awesomebootstrap-4
8

我需要将字体族更改为我拥有的一些下拉列表，图标在更改字体族之前是可见的。每个我选择的字体族都对图标无效，因此我总是看到一个方块，我该如何解决？

谢谢

请问您能分享一下源代码吗？ - ByWaleed
很可能您想使用的图标在您所包含的 Font Awesome 库中不存在，您需要向我们展示代码。 - wahdan
请检查您的控制台是否出现404错误，可能是由于您没有正确链接字体。 - Siegfried Grimbeek
Font Awesome 库使用一种特殊的字体，其中包含所有图标。将字体更改为系统字体很可能会导致缺少图标，因为它们不支持这些图标。 - Bellian
5个回答
7
对于 <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
  1. 在你的<head>标签中引入font awesome，像这样<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
  2. 使用与此完全相同的图标：<i class="fa fa-address-book" aria-hidden="true"></i>，不多不少，中间没有任何内容，在更改颜色和样式时，建议为其添加新的类并以此进行更新。
opensource.keycdn.com seems to be down! - User
1
它也可能是你使用的链接问题。一些图标来自更新的版本，不适用于旧版本存储库的链接。
确保你使用的CDN是最新的。
1
我遇到了这个问题，并追踪到一些图标被归类为"品牌图标"。
在我的情况下，Font Awesome的“实心图标”可以完美工作，但是我使用的任何“品牌图标”都会呈现为矩形。我通过使用“全部”Font Awesome 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>

希望这能帮助到某个人！
-3
尝试访问www.yourwebsite.com。 据我所知，这是由于HTTP引起的， 因此您必须从C面板使您的网站安全（HTTPS）。
4
请进一步解释。对我来说，很难发现你的答案与问题描述之间的关系。 - Yunnosch
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接