字体真棒没有显示图标

检查 CSS文件的路径是否正确。更喜欢绝对链接，它们更容易理解，因为我们知道我们从哪里开始，搜索引擎也会喜欢它们超过相对链接。为了减少带宽，还不如使用字体酷毙了的服务器上的链接:

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

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

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

一般情况下，在开发过程中使用 font-awesome.css，然后切换到 font-awesome.min.css一旦您满意的网站。

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

如果您的 html 文件位于基本目录中，而 css 位于根目录之外的子文件夹中，那么您需要: href="./css/font-awesome.css"(单期)

当你打开 font-awesome.min.css时，你可以看到以下路径:

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

It means that you have to create directory Fonts and then copy files fontawesome-webfont.ttf (fontawesome-webfont.woff, fontawesome-webfont.eot) to this folder. After that everything should work fine.

打开你的字体-真棒 有这样的代码:

@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;
}

you must have folder like :

font awesome -> css
-> fonts

或者最简单的方法:

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

在我的案例中，我在 CSS 代码中犯了以下错误。

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

这将覆盖整个页面的所有字体系列规则。 My solution was to move the code to body like so.

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

注意: 无论何时在 css 中使用 !important标志，在同一个元素上声明的任何其他类型的 css 规则都将被覆盖。

您可能已经使用了 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.

You probably have to fix your fonts.

First, check that you have class="fa" as well as whatever the icon's class is. So, not just

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

还有

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

那就像预期的那样，这解决了我的问题。

我认为你没有字体文件夹在您的根文件夹喜欢留在 css 文件夹。

演示

CSS 文件夹就像

和字体文件夹类似

我希望这对你有用。

谢谢。

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

All the above are correct however on top of that my issue was that I downloaded the free version of FA5 which doesn't have:

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

我不能让 v5工作，所以我恢复到4.7.0的帮助下，以上的职位和它修复了我的问题。

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

引自他们的网站:

FA 前缀在版本5中已被弃用。新的默认风格是固体风格和品牌的 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

我成功地使用它们的 CDN 和 javascript include (如 这一页所述)安装了 Font Awesome。然后我试图将 HTML 和 CSS 复制到一些遗留页面，突然我看到空的方框而不是图标。

I saw Daniel's answer (above) and because my legacy CSS file was huge (and years old) I suspected that was the issue. However when I looked in Chrome DevTools it really looked like Font Awesome was loaded:

I was expecting to see the font in strikeout if there was an issue... However I had really exhausted all my options so I checked the Computed Styles and saw clearly that the Font Awesome font was definitely not being used. (See the Rendered font at the bottom)

我的传统 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时，这个问题就消失了！我使用 本设定指引和这个 HTML

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

在 MacOS Mojave 中，我在 Safari 中遇到了这个问题。这些字体很棒的图片在 Chrome 中可以使用，但是在 Safari 中不行，所以我肯定不是这个网站。

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

不知道为什么这东西修好了，但是确实修好了。

So it seems adding style='font-weight:normal;' or otherwise changing the font directly on the element overrides the .fas{font-weight:900} definition in Font Awesome's CSS file. I guess the font has specific defines within the font file that it works with. It seems the font-weight must be set between 501 and 1000, or the font may look like a square block.

You needed to close your `<link />`
As you can see in your <head></head> tag. This will solve your problem


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

Watch out for Bootstrap! Bootstrap will override .fa classes. If you're bringing in both packages separately thinking "I'll use Bootstrap for responsive block handling and Font-Awesome for icons", you need to address the .fa classes inside Bootstrap so they don't interfere with Font-Awesome's stand-alone implementation.

Bootstrap 中的 Font-family‘ FontAwesome’会干扰 Font-Awesome 中的 Font-family‘ Font Awesome 5 Free’，你会得到一个白色的盒子而不是你想要的图标。

也许有更干净的方法来处理这个问题，但是如果你已经按照清单试图解决“白盒”问题，但是仍然不能解决它(像我一样) ，这可能是你正在寻找的答案。

我正在处理同样的问题，然后我发现我必须使用新的版本(5和 +)

use this cdn it will work.

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

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

npm i --save @fortawesome/fontawesome-free

然后在 SCSS 文件的顶部(最好是导入到应用程序根目录的 SCSS 文件) :

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

基于5.10.1版本。

我的解决方案(本地) :

1. 如果您使用的是“ fontawesome.css”或“ fontawesome.min.css”，尝试使用“ all.css”代替(位于 css 文件夹中)。

2. “ css”文件夹和“ webfonts”文件夹从 fontawest 软件包，你下载必须在相同的水平作为对方。

在我的例子中，我已经有了一个 css 文件夹，所以我只是将 fontawemescss 文件夹重命名为“ css-fa”。

在我的 css 文件夹中有“ css-fa”和“ webfonts”，只要在你的文本编辑器中正确地链接它就可以了。

例如: link rel = “ stylesheet”href = “ css/css-fa/all.css”

解决了将目标字体家族选择器从 * { ... } 到 *:not(i) { ... }

(使用 SCSS 预处理器) ; 希望你解决了

在我的例子中，问题是由于使用了一些常规样式(far) ，而这些样式并不包含在自由集中。改成 fas就修好了。

下面的代码是 font-Awesome 4.70.0。要转到 font-Awesome 5.11.2，请单击 给你。

<!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>

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

我也面临着同样的问题。 所以我没有下载字体很棒，而是在 html 代码中添加了一个链接。

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

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

*{
font-family: xxxxx
}

把它改成这样就解决了问题

body{
font-family: xxxx
}

我正在按照这个教程主机字体了不起的专业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>中添加的。

I was trying to add fa 5.0.13 to drupal 8 with scss. 默认情况下，fa.scss 必须手动添加这些样式。

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

you need to put font-awesome file in css folder and change

Href = “ . ./css/font-Awesome. css” to 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>

它与 v5有关，一些图标不能与旧版本一起使用。

这个链接为我工作！

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

就我而言，我需要把来自 sst & Bruno Leveque 的答案结合起来:

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

比如姜戈:

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

在我的案例中，它通过添加 font-family 工作，例如添加一个 Instagram 图标，我需要添加 font-family 作为 FontAwsome:

.fa-instagram:before {
content: "\f16d";
font-family: "FontAwesome" !important;

}

试着像这样引用所有必要的文件

<head>
<!-- reference your copy Font Awesome here (from our CDN or by hosting yourself) -->
<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">
<style type="text/css">
<!-- custom styling for all icons -->
i.fas,
i.fab {
border: 1px solid red;
}
<!-- custom styling for specific icons -->$$
.fa-fish {
color: salmon;
}


.fa-frog {
color: green;
}


.fa-user-ninja.vanished {
opacity: 0.0;
}


.fa-facebook {
color: rgb(59, 91, 152);
}
</style>
</head>
<body>
<i class="fas fa-fish"></i>
<i class="fas fa-frog"></i>
<i class="fas fa-user-ninja vanished"></i>
<i class="fab fa-facebook"></i>
</body>

对我来说，我走错了路。
此外，从网站下载最新版本。图标也必须来自相同的版本。

Https://fontawesome.com/versions

The version of Font Awesome can be seen on the link of the path. Like version 6.1.2 in the below link:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

我没有使用 CDN，而是使用了 CDNJS。到这个网站下载最新的版本。

Https://cdnjs.com/libraries/font-awesome