真棒字体没有显示图标

Question

我正在使用 Font Awesome，不希望将 CSS 与 HTTP 添加。 我下载了 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>

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

Answer 1

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

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

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

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

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

Answer 2

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

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

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

Answer 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

Answer 4

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

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

但是也

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

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

Answer 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">

Answer 6

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

使用这个cdn它会工作。

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

Answer 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文件，并且您还将立即从最新的更新中受益。

Answer 8

我遇到了同样的问题..所以我没有下载很棒的字体，而是在我的 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>

Answer 9

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

Answer 10

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

这个链接对我有用！

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

Answer 11

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

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

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

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

Answer 12

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

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

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

Answer 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';

Answer 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' %}">

Answer 15

我使用他们的 CDN 和 javascript 包括（如本页所述）成功安装了 Font Awesome。 然后我尝试将 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 版时，这个问题就消失了！ 我使用了这个设置指南和这个 HTML

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

Answer 16

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

演示

而css文件夹就像

和字体文件夹一样

我希望它对你有用。

谢谢。

Answer 17

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

Answer 18

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

Answer 19

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

Answer 20

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

*{
font-family: xxxxx
}

将其更改为此解决了问题

body{
font-family: xxxx
}

Answer 21

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

Answer 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.

您可能必须修复字体。

Answer 23

在font-awesome-4.x将fonts文件夹添加到您的Web应用程序文件夹中。

Answer 24

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

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

不知道为什么这解决了它，但它确实。

Answer 25

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

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

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

Answer 26

基于 5.10.1 版本。

我的解决方案（本地）：

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

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

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

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

Answer 27

解决了将目标 !importantized font-family 选择器从* { ... }更改为*:not(i) { ... }

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

Answer 28

下面的代码是 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>

Answer 29

我正在按照本教程自己托管 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>中。

Answer 30

我试图用 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";

Answer 31

您需要将 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>

Answer 32

就我而言，它通过添加字体系列来工作，例如添加一个 Instagram 图标，我需要将字体系列添加为 FontAwsome：

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

}

Answer 33

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

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

Answer 34

就我而言，我使用了错误的路径。
此外，从网站下载最新版本。 图标也必须来自同一版本。

https://fontawesome.com/versions

在路径的链接上可以看到 Font Awesome 的版本。 如以下链接中的 6.1.2 版本：

<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。 Go 到本网站下载最新版本。

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

Answer 35

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>

真棒字体没有显示图标

问题描述

34 个解决方案

解决方案1
94 2016-02-19 13:03:17

解决方案2
63 2015-04-03 14:47:24

解决方案3
51 2018-05-16 21:55:42

解决方案4
28 2017-03-31 20:51:33

解决方案5
22 2015-11-25 14:48:29

解决方案6
13 2019-07-18 22:34:24

解决方案7
10 2014-11-11 15:03:50

解决方案8
7 2019-12-27 13:02:53

解决方案9
6 2019-12-19 05:46:46

解决方案10
5 2020-11-22 20:18:39

解决方案11
4 2014-11-11 15:06:26

解决方案12
4 2017-12-13 17:00:56

解决方案13
3 2019-08-14 02:12:06

解决方案14
3 2020-12-16 13:05:46

解决方案15
2 2018-10-25 13:43:47

解决方案16
1 2017-07-23 06:42:58

解决方案17
1 2017-10-10 08:29:01

解决方案18
1 2019-03-19 00:30:55

解决方案19
1 2019-11-26 09:00:31

解决方案20
1 2020-04-11 06:31:01

解决方案21
1 2020-07-02 14:19:43

解决方案22
0 2017-02-20 22:56:56

解决方案23
0 2018-03-28 09:07:34

解决方案24
0 2019-03-09 05:01:37

解决方案25
0 2019-06-23 16:42:02

解决方案26
0 2019-08-24 05:51:12

解决方案27
0 2019-10-25 01:10:44

解决方案28
0 2019-11-26 19:52:31

解决方案29
0 2020-05-06 14:19:59

解决方案30
0 2020-06-23 09:58:13

解决方案31
0 2020-06-24 05:39:06

解决方案32
0 2021-12-02 21:35:31

解决方案33
0 2022-02-04 15:37:28

解决方案34
0 2022-08-04 08:56:09

解决方案35
-1 2019-05-24 14:51:47

真棒字体没有显示图标

问题描述

34 个解决方案

解决方案1 94 2016-02-19 13:03:17

解决方案2 63 2015-04-03 14:47:24

解决方案3 51 2018-05-16 21:55:42

解决方案4 28 2017-03-31 20:51:33

解决方案5 22 2015-11-25 14:48:29

解决方案6 13 2019-07-18 22:34:24

解决方案7 10 2014-11-11 15:03:50

解决方案8 7 2019-12-27 13:02:53

解决方案9 6 2019-12-19 05:46:46

解决方案10 5 2020-11-22 20:18:39

解决方案11 4 2014-11-11 15:06:26

解决方案12 4 2017-12-13 17:00:56

解决方案13 3 2019-08-14 02:12:06

解决方案14 3 2020-12-16 13:05:46

解决方案15 2 2018-10-25 13:43:47

解决方案16 1 2017-07-23 06:42:58

解决方案17 1 2017-10-10 08:29:01

解决方案18 1 2019-03-19 00:30:55

解决方案19 1 2019-11-26 09:00:31

解决方案20 1 2020-04-11 06:31:01

解决方案21 1 2020-07-02 14:19:43

解决方案22 0 2017-02-20 22:56:56

解决方案23 0 2018-03-28 09:07:34

解决方案24 0 2019-03-09 05:01:37

解决方案25 0 2019-06-23 16:42:02

解决方案26 0 2019-08-24 05:51:12

解决方案27 0 2019-10-25 01:10:44

解决方案28 0 2019-11-26 19:52:31

解决方案29 0 2020-05-06 14:19:59

解决方案30 0 2020-06-23 09:58:13

解决方案31 0 2020-06-24 05:39:06

解决方案32 0 2021-12-02 21:35:31

解决方案33 0 2022-02-04 15:37:28

解决方案34 0 2022-08-04 08:56:09

解决方案35 -1 2019-05-24 14:51:47

解决方案1
94 2016-02-19 13:03:17

解决方案2
63 2015-04-03 14:47:24

解决方案3
51 2018-05-16 21:55:42

解决方案4
28 2017-03-31 20:51:33

解决方案5
22 2015-11-25 14:48:29

解决方案6
13 2019-07-18 22:34:24

解决方案7
10 2014-11-11 15:03:50

解决方案8
7 2019-12-27 13:02:53

解决方案9
6 2019-12-19 05:46:46

解决方案10
5 2020-11-22 20:18:39

解决方案11
4 2014-11-11 15:06:26

解决方案12
4 2017-12-13 17:00:56

解决方案13
3 2019-08-14 02:12:06

解决方案14
3 2020-12-16 13:05:46

解决方案15
2 2018-10-25 13:43:47

解决方案16
1 2017-07-23 06:42:58

解决方案17
1 2017-10-10 08:29:01

解决方案18
1 2019-03-19 00:30:55

解决方案19
1 2019-11-26 09:00:31

解决方案20
1 2020-04-11 06:31:01

解决方案21
1 2020-07-02 14:19:43

解决方案22
0 2017-02-20 22:56:56

解决方案23
0 2018-03-28 09:07:34

解决方案24
0 2019-03-09 05:01:37

解决方案25
0 2019-06-23 16:42:02

解决方案26
0 2019-08-24 05:51:12

解决方案27
0 2019-10-25 01:10:44

解决方案28
0 2019-11-26 19:52:31

解决方案29
0 2020-05-06 14:19:59

解决方案30
0 2020-06-23 09:58:13

解决方案31
0 2020-06-24 05:39:06

解决方案32
0 2021-12-02 21:35:31

解决方案33
0 2022-02-04 15:37:28

解决方案34
0 2022-08-04 08:56:09

解决方案35
-1 2019-05-24 14:51:47