字体真棒没有显示图标

时间：2014-11-11 14:59:48

标签： html css font-awesome

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

我想知道如何制作图标而不是带边框的方框。

32 个答案:

答案 0 :(得分：64)

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

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

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

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

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

答案 1 :(得分：45)

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

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

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

答案 2 :(得分：24)

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

引自他们的网站：

  

在版本5中不推荐使用fa前缀。新的默认设置是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

答案 3 :(得分：20)

首先，检查你是否有班级=＆＃34; fa＆＃34;以及图标类的任何内容。所以，不仅仅是

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

但也

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

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

答案 4 :(得分：18)

打开你的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">

答案 5 :(得分：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文件，你也会立即受益于最新的更新。

答案 6 :(得分：3)

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

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

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

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

答案 7 :(得分：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';

答案 8 :(得分：2)

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

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

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

答案 9 :(得分：2)

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

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

Screenshot of CSS for Font Awesome Icon

我期望如果有问题，可以在删除线中看到该字体...但是，我确实筋疲力尽，因此我检查了计算风格，并清楚地看到肯定没有使用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>

答案 10 :(得分：1)

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

答案 11 :(得分：1)

我面临着同样的问题。 因此，与其下载真棒字体，还不如在我的html代码中添加了一个链接，它就可以工作。

class TestBase(TestCase):
    @classmethod
    def setUpClass(cls):
        super().setUpClass()
        expensive_db_init()

   class TestBehavior_A(TestCase):
       pass

   class TestBehavior_B(TestCase):
       pass

   class TestBehavior_C(TestCase):
       pass

答案 12 :(得分：1)

我的问题是得票最多的人

*{
font-family: xxxxx
}

将其更改为此解决了问题

body{
font-family: xxxx
}

答案 13 :(得分：1)

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

答案 14 :(得分：0)

您需要将超棒的字体文件放入css文件夹并进行更改

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

还有一件事，您可以替换此字体真棒的CSS文件，然后尝试使用该文件

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <style>
      #pet-select[multiple='multiple']>option:hover {
        background-color: blue !important;
        color: white !important;
      }

    </style>
  </head>
  <body>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div><select id="pet-select" multiple="multiple">
        <option value="">--Please choose an option--</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
      </select></div>
    <div style="margin-top: 30px;"><select id="pet-select">
        <option value="">--Please choose an option--</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
      </select></div>

  </body>

</html>
.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;
}

答案 15 :(得分：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";

答案 16 :(得分：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>添加。

答案 17 :(得分：0)

就我而言，我需要结合sst和Bruno Leveque的答案：

Django示例：

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

答案 18 :(得分：0)

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

此链接对我有用！

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

答案 19 :(得分：0)

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

答案 20 :(得分：0)

以下代码是超棒的4.70.0。要转到超棒的5.11.2，请点击 here。

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

答案 21 :(得分：0)

在我的情况下，问题是由使用自由集中未包含的某些常规样式（far）引起的。更改为fas即可解决。

答案 22 :(得分：0)

解决了更改目标的！importantized font-family选择器从 Cristiano Ronaldo 至 * { ... }

（使用scss预处理程序）；希望你能解决

答案 23 :(得分：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”

答案 24 :(得分：0)

我当时正在处理相同的问题，所以我发现我必须使用新版本（5及更高版本）

使用此CDN即可。

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

答案 25 :(得分：0)

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

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

也许有更干净的方法可以解决此问题，但是如果您已经放弃了尝试解决“白盒”问题的清单，但仍然无法解决问题（像我一样），这可能就是您的答案正在寻找。

答案 26 :(得分：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>

答案 27 :(得分：0)

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

答案 28 :(得分：0)

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

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

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

答案 29 :(得分：0)

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

答案 30 :(得分：0)

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

<强>演示

enter image description here

和css文件夹类似

enter image description here

和字体文件夹一样

enter image description here

我希望它对你有用。

谢谢你。

答案 31 :(得分：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.

您可能需要修复字体。

相关问题
最新问题