真棒字体未显示图标

99

我正在使用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>

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

html  css  font-awesome 
— 加内什H
source
5
这已经被问过很多次了。确保你包括字体文件太..不只是CSS stackoverflow.com/questions/14366158/...
— 以星
— Mehavel
请使用其中包含font-awesome文件夹的文件夹结构更新问题，以便我们可以确定“ font-awesome.min.css”是否正确获取ttf路径。只有css无法正常工作。
— Ajit Hogade '16
— rishta

Answers:

84

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

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

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

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

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

— 丹尼尔·巴德
source
4
这是我的解决方案。我吃过*{font-family: Raleway}，将其更改为*.not(i) {font-family: Raleway}
— fungusanthrax
我也有这个问题，但是我很长一段时间都没有意识到，因为在DevTools中它确实看起来像是在使用FontAwesome。请参阅我的答案以获取更多详细信息。
— 达格玛
59

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

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

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

— 用户名
source
由于未引用至少0.8.1的font-awesome。有三个summernote与扩展的字体文件夹中的文件eot，ttf以及woff需要进行分配。
— ficuscr '16
2
请注意，在4.6.3（如果不是更早版本）中fonts不是，Fonts并且在引起问题的区分大小写的系统上……
— Jason
1
为什么字体棒极了在他们的网站上不说呢？这确实不是很明确。
— 马特
太棒了！我认为字体必须与css放在同一文件夹中，它们必须是一级文件夹。
— Giovani Vercauteren
另外，请确保您的资料库是最新的。我有所有的徽标，除了bandcamp徽标。一旦下载了更新的4.7并替换了文件，它就可以工作。
— 瑞安·沃克
45

请注意，真棒的新版本（5）使用"fas"或"fab"代替了"fa"前缀。

从他们的网站引用：

fa前缀在版本5中已弃用。新的默认设置是fas实体样式和品牌的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

— 克里斯汀
source
为我做到了！奇怪的是它没有在文档中更新
— GroomedGorilla
这是唯一有效的方法。如果您使用的是现代版本，请使用此版本。
— samurdhilbk
LIVE SAVER！更改为“ fa fa-bars”感到厌烦
— 讨厌的
谢谢，对我来说，有些图标与fas混在一起，而另一些与fab混在一起，例如fab fa-twitter很好，但是fas fa-twitter显示一个白色正方形，请加油！
— user1620090
因此，如果新版本是fas，那么为什么我需要将我的课程从“ fas”更改为“ fa”
— 山姆
22

首先，检查您是否具有class =“ fa”以及图标的类别。所以，不只是

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

但是也

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

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

— 还有一个问题
source
1
这对我有用。对我而言，fab fa-envelop无法正常工作，但是fa fa-envelop却可以正常工作。很奇怪，但解决了我的问题。
— 乔丹·舒茨
@JordanSchuetz“ fab”特定于品牌图标，例如“ fab fa-facebook-f”。在较新版本中，您将为“ solid”变体找到“ fas”，因此您将在较新版本中将其固定为“ fas fa-envelope”，而在较旧版本中则为“ fa fa-envelope”。
— 泰莎
20

打开您的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">
— 尔加·康德利
source
11

检查CSS文件路径是否正确。相对于绝对链接，它们更易于理解，因为我们知道从哪里开始，搜索引擎也比相对链接更喜欢它们。为了减少带宽，请使用真棒字体服务器的链接：

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

此外，如果使用它，则无需将其他字体上载到服务器，并且可以确保您指向正确的CSS文件，并且您也将立即从最新更新中受益。

— 瓦伦丁·梅西耶
source
10
我做了同样的事情，但仍然只有方盒
— Vipul Hadiya
5

我正在处理相同的问题，然后我想通了我必须使用新版本（5及以上）

使用此CDN它将起作用。

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

一开始，你不应该有两个font-awesome.css 和 font-awesome.min.css

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

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

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

— 保罗
source
4

上面所有这些都是正确的，但是最重要的是我下载了免费版本的FA5，该版本没有：

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

我无法使v5正常工作，因此在上述帖子的帮助下将其恢复到4.7.0，从而解决了我的问题。

— 米克斯
source
1
我也无法正常使用FontAwesome v5 +。已经在css中将其“ webfonts”文件夹更改为“ fonts”，并以相同的方式放置了它，但无法正常工作。用v4.7.0替换了文件，它的工作原理很吸引人。嗯
— 丽莎·塞里利
1
在版本5中，图标的字体系列不再是“ FontAwesome”。在免费版本中，专业版现在为“ Font Awesome 5 Free”和“ Font Awesome 5 Pro”。当我在几个地方手动使用字符代码时遇到了这个问题，由于未设置字体系列，它们停止工作。
— 泰莎
4

我正面临着同样的问题..因此，与其下载真棒字体，不如在我的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>
展开摘要

— 赫里西克·维玛（Hrithik verma）
source
非常感谢您，我花了24小时修复了这个惊人的功能
— Mathew Magante
2

我已使用其CDN和javascript include（如本页所述）成功安装了Font Awesome 。然后，我尝试将HTML和CSS复制到某些旧页面，突然我看到了空的方框而不是图标。

我（上面）看到了Daniel的回答，并且由于我的旧CSS文件很大（而且已经存在了很长时间），所以我怀疑这就是问题所在。但是，当我查看Chrome DevTools时，确实看起来像加载了Font Awesome：

Font Awesome Icon的CSS屏幕截图

我本来希望在出现问题的情况下在删除线中看到该字体...但是，我确实筋疲力尽，因此我检查了计算样式，并清楚地看到肯定没有使用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>
— 达格玛
source
2

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

npm i --save @fortawesome/fontawesome-free

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

@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';
— 杰夫·迪德里克斯
source
有趣的添加@fortawesome/fontawesome-free/css/all.css修复了它
— Andy Braham
1

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

— 不锈钢
source
1

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

— 詹姆斯·威尔金斯
source
1

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

*{
font-family: xxxxx
}

将其更改为此解决了问题

body{
font-family: xxxx
}
— 贾姆舍尔
source
0

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

您可能必须修复字体。

— 利斯塔
source
0

在MacOS Mojave上，我在Safari中遇到此问题。字体超赞的图片可以在Chrome中使用，但不能在Safari中使用，因此我确定它不是该网站。

通过转到Safari菜单中的“偏好设置”，然后禁用/取消选中“隐私”选项卡下的“防止跨站点跟踪”，可以使它们呈现。

不知道为什么要修复它，但是确实可以。

— 迈克尔·舒尔曼
source
0

基于5.10.1版本。

我的解决方案（本地）：

  1. 如果您使用的是“ fontawesome.css”或“ fontawesome.min.css”，请尝试使用“ all.css”（位于css文件夹中）。

  2. 您下载的fontawesome软件包中的“ css”文件夹和“ webfonts”文件夹必须处于同一级别。

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

在我的css文件夹中同时包含“ css-fa”和“ webfonts”，只需在您的文本编辑器中将其正确链接即可。

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

— 杨投头
source
0

解决了将目标！importantized字体系列选择器从 * { ... } 更改为 *:not(i) { ... }

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

— backciro
source
0

下面的代码是超棒的4.70.0。要转到超赞的字体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>
— PythonMaster202
source
0

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

— 布鲁诺·莱维克
source
0

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

— 奥格拉斯
source
js的问题在于文件负载过重
— exequielc
0

我试图用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";
— 邦基萨玛
source
0

您需要将真棒字体文件放在css文件夹中并进行更改

href =“ ../ css / font-awesome.css”到href =“ css / font-awesome.css”

另一件事，您可以替换此Font-awesome 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>
展开摘要

— 萨尼
source
0 

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

— 德津唐
source
与此配合得很好
— De Zin Htang
-1 
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>
— 罗纳德·南万扎
source
-1

提防Bootstrap！Bootstrap将覆盖.fa类。如果您要同时引入两个软件包，以为“我将使用Bootstrap进行响应式块处理，使用Font-Awesome进行图标”，则需要处理Bootstrap中的.fa类，以免它们干扰Font-Awesome的立场-单独执行。

例如：Bootstrap中的字体家族'FontAwesome'将干扰Font-Awesome中的字体家族'Font Awesome 5 Free'，并且您将得到一个白框，而不是想要的图标。

也许有更干净的方法可以解决此问题，但是，如果您在检查清单中尝试解决“白盒”问题，但仍然无法解决问题（像我一样），那么这可能就是您要寻找的答案对于。

— Jtubre
source
为什么投票失败？这是一个极端的情况，但这是其他地方不容易找到的原因。
— jtubre
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.