【问题标题】：FontAwesome icons are not showing, Why? [closed]FontAwesome 图标没有显示，为什么？ [关闭]
【发布时间】：2014-09-15 08:47:36
【问题描述】：

最近我一直在开发一个网站，我正在尝试使用一些字体很棒的图标。

问题是，他们没有出现。

这是 HTML：

<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>

或

<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>

我确实将样式表引用放在了头部。

我不知道他们为什么没有出现。

这是参考：

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

这是完整的html：

<head>
    <meta charset="UTF-8">
    <title>Retrica</title>
    <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    
    <link href="style/normalize.css" rel="stylesheet" type="text/css">
    <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="style/main.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header class="top-header">
        <div class="container"><!-- Start Container -->
            <div class="row"><!-- Start Row -->
                <div class="span3"><!-- Start Span3 -->
                    <div class="logo"><img src="img/Retrica.@2x.png" alt="" width="67px" height="13,5px"></div>
                </div><!-- End Span3 -->
                <div class="span9"><!-- Start Span9 -->
                    <nav class="main-nav">  <!-- Start Nav -->
                    
                        <a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
                        <ul class="nav-ul"> <!-- Start Unordered List -->
                            <li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
                            <li><a href="#"><span class="fa fa-mobile-phone fa-2x"></span> Contact Us</a></li>
                            
                        </ul> <!-- End Unordered List -->
                    </nav><!-- End Nav -->
                </div><!-- End Span9 -->
            </div><!-- End Row -->
        </div><!-- End Container -->
    </header>
    
    <section>

        <a href="#" class="btncta">Register Now</a>
    </section>

</body>

【问题讨论】：

对我来说很好：jsfiddle.net/ZF7x4
相关stackoverflow.com/questions/14366158/…
请尝试其他版本的 font-awesome。例如，有些图标在 4.3.0 版本上没有显示给我，但在 4.7.0 上确实出现了。
我能够使用 all.min.css 文件让 Font Awesome 正常工作。

标签： html css font-awesome

【解决方案1】：

根据你的参考，你有这个：

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

具体来说，href= 部分。

但是，在您的完整 html 下是这样的：

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

您是否尝试在完整的 html 中将 src= 替换为 href= 以变成这样？

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

为我工作：http://codepen.io/TheNathanG/pen/xbyFg

【讨论】：

注意：有时您可能会看到空框，然后仔细检查同一文件夹中是否有 css 和字体文件检查 this，希望对某人有所帮助。

【解决方案2】：

对于缺少字体真棒图标的寻求者，我收集了一些想法：

确保您使用正确的 CDN 链接，例如：

<link 
  href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
  rel="stylesheet"  type='text/css'>

如果您的页面使用 HTTPS，您是否使用 HTTPS 链接到字体很棒的 CSS（将上面链接中的 http:// 替换为 https://）。
仔细检查您是否未启用 AdBlock Plus 或 uBlock。他们可能会阻止某些图标。
重置浏览器缓存。（在 Chrome 上点击重新加载按钮并选择硬缓存重置）
确保您使用的 或 元素使用FontAwesome 字体系列。例如，它不能只是
```

```
但是
```

```
如果您的 CSS 中有以下内容，它将无法正常工作：
```
* {
 font-family: 'Josefin Sans', sans-serif !important; 
}
```
如果您使用的是 IE8，您是否使用的是 HTML5 Shim？
如果这不起作用，在 Font Awesome Wiki 上还有更多 Troubleshooting Ideas。

【讨论】：

我将补充：检查您的 .htaccess 是否阻止 ttf、svg、eot 或 woff 扩展名
字体覆盖！没有多少答案提到这个。我检查了又检查了一遍，终于弄明白了。我以前也遇到过这个问题，不知道为什么，现在知道了。
我错过了先添加单个 fa 作为类名。谢谢。一步一步找到问题的完美答案。
对我来说，设置字体系列是另一回事
对我来说，我有“font-weight: 500”（使其与我使用的主题一致）。我必须将其设置为“字体粗细：粗体”

【解决方案3】：

起初我无法使用 Font Awesome 5：

<i class="fa fa-sort-down"></i>

这就是我来这里的原因，不熟悉字体真棒。因此，当我进一步查看时，我发现我的问题只是版本问题。

w3schools 在这种情况下帮助了我。

Font Awesome 5 中的新功能是 fas 前缀，Font Awesome 4 使用 fa。

fas中的s代表solid，有些图标也有常规模式，使用前缀far指定。

我已经注意到 FontAwesome css 文件夹中的不同文件，例如：

all.min.css
brands.min.css
fontawesome.min.css
regular.min.css
solid.min.css

那时我才意识到自己的错误。我所要做的就是在 html 中包含适当的 css：

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">

然后引用正确的项目：

<i class="fas fa-sort-down"></i>

此设置对我有用。尽管并非所有项目在每种类型中都有等价物。这不起作用：

<i class="far fa-sort-down"></i>

附带说明，当您不想引用所有单独的文件时，这就足够了：

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">

【讨论】：

此外，cheatsheet 显示了每种图标类型可用的项目。
我必须包含 font-awesome.min.css fwiw。不过这篇文章对我有帮助。

【解决方案4】：

我的不工作，因为我想要一个未在我使用的 FA 版本中发布的图标。

这回答了为什么有些图标显示而其他图标没有。

很明显，但我想有些人仍然会为此而堕落。像我一样。

【讨论】：

是的，它确实提供了问题的答案。
或者您正在尝试使用您正在使用的版本中不再存在的旧字体。例如，这个只是称为 times-circle 而不是 times-circle-o 这是旧名称：fontawesome.com/v4.7.0/icon/times-circle-o
谢谢！！这让我整天拉头发

【解决方案5】：

只需在上述答案中添加更多关于 fontawesome 更新的信息，

如果你使用 font awesome 5，

一个。只需复制粘贴以下 HTML，

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

注意：最好将所有脚本包含在 <body> {YOUR_SCRIPT_HERE}</body> 和 (YOUR_CLOSING_BODY) 之前

b.例如，

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>

【讨论】：

如何在本地提供 css 而不是链接到 fa 网站？
这是我的情况...我没有 js 文件，现在可以了！

【解决方案6】：

您必须对 maxcdn.bootstrapcdn.com 使用 https。 maxcdn 上只有 https 支持 CORS

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

【讨论】：

【解决方案7】：

我遇到了类似的问题，以正方形显示图标，按照此处指定的说明进行了尝试：https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

通过在 html 页面的 head 部分使用此引用解决

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

【讨论】：

这对我有用！！！乔卡 2021
我在使用其他一些链接时遇到了问题，但这个似乎有效！谢谢！（2021 年 6 月）

【解决方案8】：

我通过将 Fonts 目录与我的 CSS 文件放在同一级别解决了这个问题。

【讨论】：

【解决方案9】：

致任何可能在 2018 年检查这一点的人。我使用的是 font awesome 4.7.0，我通过简单地取出 fas 中的 s 解决了这个问题，如代码  所示。这最初是。

希望这会有所帮助。

【讨论】：

另外我正在运行 node.js 服务器。
Font Awesome 5 中新增的是 fas 前缀，Font Awesome 4 使用 fa。 来自w3schools

【解决方案10】：

注意事项

当fontawesome 的最新版本是 v5.* 但 yarn 和 npm 版本指向 v4.* (21.06. 2019）。换句话说，通过包管理器安装的版本落后于最新版本！

如果您通过包管理器（yarn 或npm）安装了font-awesome，那么请注意安装的是哪个版本。或者，如果您很久以前已经安装了font-awesome，请检查安装的版本。

安装 font-awesome 作为新依赖：

$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ font-awesome@4.7.0
info All dependencies
└─ font-awesome@4.7.0
Done in 3.32s.

检查已安装的 font-awesome 版本：

$ yarn list font-awesome
yarn list v1.16.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ font-awesome@4.7.0
Done in 0.79s.

问题

安装font-awesome 依赖项后，您将这两个源文件font-awesome.css 或font-awesome.min.css（创建于node_modules/font-awesome/css/）中的一个合并到您网页的header 中，例如

<head>
  <link type="text/css" rel="stylesheet" href="css/font-awesome.css">
</head>

接下来，您访问https://fontawesome.com/。您选择免费图标并搜索登录图标（例如）。您复制图标，例如，你把它粘贴到你的html中，图标不显示，或者显示为正方形或矩形！

解决方案

本质上，通过包管理器安装的版本落后于https://fontawesome.com/ 网站上显示的版本。如您所见，我们安装了font-awesome v4.7.0，但是网站显示了font-awesome v5.* 的文档。解决方案，访问记录v4.7.0https://fontawesome.com/v4.7.0 图标的网站，复制相应的图标，例如 并将其合并到您的 html 中。

【讨论】：

他们发布了一个新包here，它有最新版本。它还兼容 less 和 sass \o/

【解决方案11】：

对于版本 5：

如果您从该站点下载了免费包：

https://fontawesome.com/download

字体在 all.css 和 all.min.css 文件中。

所以您的参考将如下所示：

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">

fontawesome.css 文件不包含字体参考。

【讨论】：

【解决方案12】：

添加这个对我有用：

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">

take a look

所以完整的例子是：

<link href="https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/css/fontawesome.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Compute <i class="fa fa-calculator"></i></a>

【讨论】：

【解决方案13】：

如果您定义自定义 CSS，您必须为一些较新的 Font Awesome 库（从版本 5）设置 font-weight: 900;。不设置此字体粗细可能会显示正方形。

【讨论】：

【解决方案14】：

如果您使用博客托管，请使用此 url 样式表 css：

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

【讨论】：

【解决方案15】：

尝试以下两个链接保留在标题标签中。

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

从以下链接获取图标：

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css">

【讨论】：

【解决方案16】：

我用：

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<a class="icon fa-car" aria-hidden="true" style="color:white;" href="http://viettelquangbinh.com"></a>

和之后的样式：

.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}

【讨论】：

【解决方案17】：

我想你发布的 CDN 链接是它无法正确显示的原因，你可以在下面使用这个，它对我来说非常有用。

&lt;link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"&gt;

【讨论】：

【解决方案18】：

你可以在 awesome font 目录下的 .htaccess 文件中添加这个

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/woff .woff
AddType font/woff .woff2
AddType font/otf .svg

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

【讨论】：

【解决方案19】：

我已经测试过了，它正在工作。

不是这个

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

通过 HTTPS 使用它

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

【讨论】：

【解决方案20】：

使用此链接：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/brands.min.css" integrity="sha512-AMDXrE+qaoUHsd0DXQJr5dL4m5xmpkGLxXZQik2TvR2VCVKT/XRPQ4e/LTnwl84mCv+eFm92UG6ErWDtGM/Q5Q==" crossorigin="anonymous" />

【讨论】：

【解决方案21】：

如果您使用的是较新版本的 Angular，仅使用 npm/yarn 安装软件包是不够的。您还需要在 styles.scss 中导入 css 文件（使用 @import "~bootstrap-icons/font/bootstrap-icons.css";）。

【讨论】：

【解决方案22】：

确保在 Awesomefont CSS 文件的链接中包含 rel 和 type，如 rel="stylesheet" type='text/css'。如果没有这些，我无法正确加载文件。

【讨论】：

【解决方案23】：

您需要一个字体导入器。|试试

<style> 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>

【讨论】：

【解决方案24】：

我通过编辑主要的 font-awesome.css 文件让我的工作。它有 src 的 url（woff、eot 等）我不得不将它们更改为绝对路径，例如：http://mywebsite.com/font-awesome.woff 然后就成功了！

【讨论】：

我不建议这样做，因为您正在编辑外部文件。您（或您的团队）每次需要更新 fontawesome 时都需要记住这一点。

【解决方案25】：

改变这个：

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

到这里：

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

我相信你需要http:，否则它不知道要使用什么协议（结果使用了错误的协议，例如file:）。

【讨论】：

@user3870894 其实是href，我在想javascript。但试试新代码。
@user3870894 o_o 然后发布完整的 HTML 或至少主要部分。控制台说什么？你试过检查元素吗？
@Shahar 通过使用//，浏览器会选择请求站点正在使用的协议。当您的网站使用 https 时，它会选择 https。如果您使用的是 http，它会使用 http 从 CDN 请求文件。当然，如果你在本地使用file:///打开网站，不推荐，浏览器确实会尝试使用file协议打开cdn。