真棒字体没有显示图标答案

【问题标题】：Font awesome is not showing icon真棒字体没有显示图标
【发布时间】：2015-01-08 04:09:22
【问题描述】：

我正在使用 Font Awesome，不希望通过 HTTP 添加 CSS。我下载了 Font Awesome 并将其包含在我的代码中，但 Font Awesome 显示的是带边框的方形框而不是图标。这是我的代码：

<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
   <i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>

我想知道如何让图标显示而不是带边框的方框。

【问题讨论】：

这个问题已经被问过很多次了。确保你也包括字体文件..不仅仅是 CSS stackoverflow.com/questions/14366158/…
这里是 git github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting中字体真棒旅游指南的链接
请用您的文件夹结构更新问题，其中您有 font-awesome 文件夹，因此我们可以确定“font-awesome.min.css”是否正确获取 ttf 路径。只有 css 不起作用。
stackoverflow.com/a/42355738/397872

标签： html css font-awesome

【解决方案1】：

就我而言，我在我的 css 代码中犯了以下错误。

*{
    font-family: 'Open Sans', sans-serif !important;
}

这将覆盖整个页面的所有字体系列规则。我的解决方案是像这样将代码移动到正文中。

body{
    font-family: 'Open Sans', sans-serif;
}

注意：每当您在 css 中使用 !important 标志时，在同一元素上声明的相同类型的任何其他 css 规则都将被覆盖。

【讨论】：

这是我的解决方案。我有*{font-family: Raleway}，我把它改成了*.not(i) {font-family: Raleway}
我也遇到了这个问题，但是我很久没有意识到它，因为在 DevTools 中它看起来真的像使用了 FontAwesome。有关详细信息，请参阅我的答案。

【解决方案2】：

当你打开font-awesome.min.css你可以看到如下路径：

'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...

这意味着您必须创建目录Fonts，然后将文件fontawesome-webfont.ttf（fontawesome-webfont.woff，fontawesome-webfont.eot）复制到该文件夹。之后一切正常。

【讨论】：

因为至少 0.8.1 font-awesome 没有被引用。字体文件夹中有三个summernote文件，扩展名为eot、ttf和woff需要分发。
请注意，在 4.6.3（如果不是更早版本）中，它是 fonts 而不是 Fonts，并且在区分大小写的系统上会导致问题...
为什么字体真棒没有在他们的网站上说出来？这真的不明确。
太棒了！我认为字体必须与 css 在同一个文件夹中，它们必须是上一级的文件夹。
另外，请确保您的库是最新的。我有我所有的标志，除了 bandcamp 标志。一旦我下载了更新的 4.7 并替换了文件，它就可以工作了。

【解决方案3】：

请注意，font awesome 的新版本 (5) 使用 "fas" 或 "fab" 而不是 "fa" 前缀。

引自他们的网站：

fa 前缀在版本 5 中已被弃用。新的默认值是 fas solid 样式和品牌的 fab 样式。

这就是我的字体显示空白方块的原因。现已修复。

示例代码：

<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>

见：https://fontawesome.com/icons/facebook-f?style=brands

【讨论】：

为我做到了！奇怪的是它没有在文档中更新
这是唯一有效的方法。如果您使用的是现代版本，请使用它。
LIVE Saver！更改为“fa fa-bars” borked
谢谢，对我来说，一些图标与 fas 和其他与 fab 一起使用，例如 fab fa-twitter 很好，但 fas fa-twitter 显示一个白色方块，去看看！
所以如果新版本是fas，那我为什么需要把我的classes从'fas'改成'fa'

【解决方案4】：

首先，检查您是否拥有 class="fa" 以及图标的类别。所以，不仅仅是

<i class="fa-pencil" title="Edit"></i>

还有

<i class="fa fa-pencil" title="Edit"></i>

然后它按预期工作。这解决了我的问题。

【讨论】：

这对我有用。对我来说，fab fa-envelop 没有工作，但是 fa fa-envelop 正在工作。很奇怪，但解决了我的问题。
@JordanSchuetz “fab”特定于品牌图标，例如“fab fa-facebook-f”。在较新的版本中，您会找到“solid”变体的“fas”，因此您的在较新版本中将固定为“fas fa-envelope”，或在旧版本中固定为“fa fa-envelope”。跨度>

【解决方案5】：

打开你的 font-awesome.css 有类似的代码：

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

你必须有这样的文件夹：

font awesome -> css
 -> fonts

或最简单的方法：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

【讨论】：

【解决方案6】：

我正在处理同样的问题，然后我发现我必须使用新版本（5 及以上）

使用这个cdn就可以了。

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

【讨论】：

【解决方案7】：

检查您的CSS 文件的路径是否正确。更喜欢绝对链接，它们更容易理解，因为我们知道我们从哪里开始，搜索引擎也会更喜欢它们而不是相对链接。为了减少带宽而不是使用来自 font-awesome 服务器的链接：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css">

此外，如果您使用它，将无需将额外的字体上传到您的服务器，并且您将确保指向正确的CSS文件，您还将受益于即时更新。

【讨论】：

我做了同样的事情，但仍然只有方形盒子

【解决方案8】：

我遇到了同样的问题.. 因此，我没有下载很棒的字体，而是在我的 html 代码中添加了一个链接，并且它起作用了。

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"&gt;&lt;/script&gt;

【讨论】：

非常感谢，我花了 24 小时修复这个字体太棒了

【解决方案9】：

我正在使用 FontAwesome Pro，我的解决方案是嵌入 all.min.css 而不是 fontawesome.min.css。

【讨论】：

这是我的问题
免费也一样

【解决方案10】：

与v5有关，有些图标不适用于旧版本。

这个链接对我有用！

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

【讨论】：

【解决方案11】：

首先，您不应该同时拥有font-awesome.css 和 font-awesome.min.css

通常，在开发过程中使用font-awesome.css，然后在您对网站满意后切换到font-awesome.min.css。

此类问题通常是由相对路径和位置引起的，因此请检查您的 html 文件相对于 css 的位置。

如果您的 html 文件位于基本目录中，并且 css 位于根目录下的子文件夹中，则您需要： href="./css/font-awesome.css"（单句）

【讨论】：

【解决方案12】：

以上所有内容都是正确的，但最重要的是我的问题是我下载了 FA5 的免费版本，它没有：

font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')

我无法让 v5 工作，所以我在上面的帖子的帮助下恢复到 4.7.0，它解决了我的问题。

【讨论】：

我在让 FontAwesome v5+ 也能正常工作时遇到了问题。已将他们的“webfonts”文件夹更改为css中的“fonts”，并以相同的方式放置，但无法正常工作。用 v4.7.0 替换文件，它就像一个魅力。小时。
在版本 5 中，图标的字体系列不再是“FontAwesome”。在免费版中，现在是“Font Awesome 5 Free”和专业版中的“Font Awesome 5 Pro”。当我在几个地方手动使用字符代码时遇到了这个问题，由于未设置字体系列，它们停止工作。

【解决方案13】：

对于那些使用 SCSS 和 NPM 包的人，这是我的解决方案：

npm i --save @fortawesome/fontawesome-free

然后在 SCSS 文件的顶部（最好是在应用程序的根目录中导入的 SCSS 文件）：

@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';

【讨论】：

有趣的添加@fortawesome/fontawesome-free/css/all.css修复了它

【解决方案14】：

就我而言，我需要结合 sst 和 Bruno Leveque 的答案：

https://fontawesome.com/download
通过网络免费下载，解压
将所有文件夹复制到 /fontawesome/
链接 all.min.css 而不是 fontawesome.css

示例 Django：

# in myapplication/vendor/fontawesome/ everything unpacked
<link rel="stylesheet" href="{% static 'myapplication/vendor/fontawesome/css/all.min.css' %}">

【讨论】：

【解决方案15】：

我使用他们的 CDN 和 javascript 成功安装了 Font Awesome（如 this page 所述）。然后我尝试将 HTML 和 CSS 复制到一些遗留页面，突然我看到空的方框而不是图标。

我看到了 Daniel 的回答（上图），因为我的旧 CSS 文件很大（而且已经存在多年），我怀疑这就是问题所在。然而，当我查看 Chrome DevTools 时，它看起来真的像 Font Awesome 已加载：

如果出现问题，我希望在删除中看到字体...但是我真的用尽了所有选项，所以我检查了 Computed Styles 并清楚地看到 Font Awesome 字体肯定没有被使用。（见底部的渲染字体）

我的旧 CSS 文件一团糟，我不想碰它，所以我这样做是作弊 - 请不要告诉任何人 :)

<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>

还要注意，当我从 Font Awesome 版本 4.7.0 升级到版本 5.4.1 时，这个问题就消失了！我使用了this setup guide 和这个 HTML

<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>

【讨论】：

【解决方案16】：

我认为你的根文件夹中没有字体文件夹，比如 CSS 文件夹。

演示

和css文件夹一样

和字体文件夹一样

我希望它对你有用。

谢谢。

【讨论】：

【解决方案17】：

就我而言：您需要将整个 font-awesome 文件夹 复制到您的项目 css 文件夹，而不仅仅是 font-awesome.min.css 文件。

【讨论】：

【解决方案18】：

所以似乎添加style='font-weight:normal;' 或直接在元素上更改字体会覆盖Font Awesome 的CSS 文件中的.fas{font-weight:900} 定义。我猜该字体在它使用的字体文件中有特定的定义。 font-weight 似乎必须设置在 501 到 1000 之间，否则字体可能看起来像一个方块。

【讨论】：

【解决方案19】：

就我而言，问题是由于使用了一些不包含在免费集中的常规样式 (far) 引起的。更改为 fas 修复了它。

【讨论】：

这为我解决了，谢谢

【解决方案20】：

我的问题是得票最多的问题

*{
font-family: xxxxx
}

改成这样就解决了问题

body{
font-family: xxxx
}

【讨论】：

【解决方案21】：

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"&gt;&lt;/script&gt;

【讨论】：

很好地处理这个

【解决方案22】：

您可能使用过 VCS（git 或类似的）将图标文件传输到服务器。 git 说：

warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.

你可能需要修复你的字体。

【讨论】：

【解决方案23】：

在 MacOS Mojave 上，我在 Safari 中遇到了这个问题。字体很棒的图片在 Chrome 中运行，但在 Safari 中无法运行，所以我确定它不是该网站。

我通过转到 Safari 菜单中的“首选项”并在“隐私”选项卡下禁用/取消选中“防止跨站点跟踪”来让它们呈现。

不知道为什么会这样修复它，但确实如此。

【讨论】：

【解决方案24】：

注意引导程序！ Bootstrap 将覆盖 .fa 类。如果您将两个软件包分别引入，并认为“我将使用 Bootstrap 进行响应式块处理，并使用 Font-Awesome 来处理图标”，您需要解决 Bootstrap 中的 .fa 类，这样它们就不会干扰 Font-Awesome 的立场-单独实施。

例如：Bootstrap 中的 font-family 'FontAwesome' 会干扰 Font-Awesome 中的 font-family 'Font Awesome 5 Free'，你会得到一个白框而不是你想要的图标。

可能有更简洁的方法来处理此问题，但如果您已按照清单尝试解决“白盒”问题但仍然无法解决（就像我一样），这可能是您的答案正在寻找。

【讨论】：

为什么要投反对票？这是边缘情况，但这是其他地方不容易找到的原因。

【解决方案25】：

基于5.10.1版本。

我的解决方案（本地）：

如果您使用的是“fontawesome.css”或“fontawesome.min.css”，请尝试改用“all.css”（位于 css 文件夹中）。
您下载的fontawesome包中的“css”文件夹和“webfonts”文件夹必须处于同一级别。

就我而言，我已经有一个 css 文件夹，所以我只是将 fontawesome css 文件夹重命名为“css-fa”。

在我的 css 文件夹中同时使用“css-fa”和“webfonts”，只需在文本编辑器中正确链接它，它应该可以工作。

例如：link rel="stylesheet" href="css/css-fa/all.css"

【讨论】：

【解决方案26】：

解决了更改目标 !importantized font-family 选择器的问题 * { ... } 到 *:not(i) { ... }

（使用 scss 预处理器）；希望你解决了

【讨论】：

【解决方案27】：

下面的代码是 font-awesome 4.70.0。要转到 font-awesome 5.11.2，请单击 here。

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<i class="fa fa-camera-retro" aria-hidden="true"></i>

</html>

【讨论】：

【解决方案28】：

我正在按照本教程自己托管 Font Awesome Pro 5.13。

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

由于某种原因，我无法让<link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet"> 加载webfonts，这反过来导致只显示正方形。但是当我使用<script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script> 时，一切都开始工作了。两个链接均以 HTML <head> 添加。

【讨论】：

这个js的问题是文件负载太重

【解决方案29】：

我试图用 scss 将 fa 5.0.13 添加到 drupal 8。样式默认不包含在主fa.scss中，必须手动添加。

@import "libraries/fontawesome/fa-brands";
@import "libraries/fontawesome/fa-light";
@import "libraries/fontawesome/fa-regular";
@import "libraries/fontawesome/fa-solid";

【讨论】：

【解决方案30】：

你需要把 font-awesome 文件放在 css 文件夹中并更改

href="../css/font-awesome.css" 到 href="css/font-awesome.css"

还有一件事你可以替换这个字体很棒的 css 文件，然后试试这个

.social-media{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.social-media li .fa{ 
  background: #fff;
  color: #262626;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align:center;
  line-height:50px; 
}

.social-media .fa:hover { 
  box-shadow: 5px 5px 5px #000; 
}

.social-media .fa.fa-twitter:hover{
  background:#55acee;
  color:#fff;
 
}

.social-media .fa.fa-facebook:hover{
  background:#3b5998;
  color:#fff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<ul class="social-media">
  <li><i class="fa fa-twitter fa-2x"></i></li>
  <li><i class="fa fa-facebook fa-2x"></i></li>
 
</ul>

【讨论】：