字体真棒没有显示图标

问题描述 投票：69回答：17

我正在使用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
17个回答
68
投票

在我的情况下，我在我的CSS代码中犯了以下错误。

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

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

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

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

1
投票

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

0
投票

您可能已使用VCS（git或somesuch）将图标文件传输到服务器。 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.

您可能需要修复字体。

0
投票

我认为你的根文件夹中没有fonts文件夹，例如stay css文件夹。

演示

enter image description here

和css文件夹一样

enter image description here

和字体文件夹一样

enter image description here

我希望它对你有用。

谢谢。

0
投票

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

0
投票

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

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

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

0
投票

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

0
投票
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>
0
投票

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

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

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

0
投票

我正在处理同样的问题然后我想出来我必须使用新版本（5和加号）

使用这个cdn它会工作。

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

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

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

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

27
投票

请注意，字体真棒的新版本（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

20
投票

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

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

但是也

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

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

19
投票

打开你的font-awesome.css theres代码，如：

@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">
10
投票

检查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文件，您也将立即受益于最新的更新。

3
投票

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

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

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

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

2
投票

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

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

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

2
投票

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

我看到了丹尼尔的回答（上图），因为我遗留的CSS文件很庞大（而且已经很久了），我怀疑这是问题所在。但是，当我查看Chrome DevTools时，它看起来真的像Font Awesome一样：

Screenshot of CSS for Font Awesome Icon

我期待在出现问题时看到三角形中的字体...但是我已经把所有选项都用尽了，所以我查看了Computed Styles并清楚地看到Font Awesome字体绝对没有被使用。 （参见底部的渲染字体）

Font Awesome not being used

我遗留的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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.