253

所以我正在尝试制作一个营销页面的原型,我正在使用 Bootstrap 和新的 Font Awesome 文件。问题是当我尝试使用图标时,页面上呈现的所有内容都是一个大正方形。

这是我在头部包含文件的方式:

<head>
        <title>Page Title</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/app.css">
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
        <![endif]-->
</head>

这是我尝试使用图标的示例:

<i class="icon-camera-retro"></i>

但是所有这些都呈现在一个大正方形中。有谁知道会发生什么?

4

43 回答 43

201

您必须有 2 个类,fa该类和标识所需图标的类fa-twitterfa-search等……

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>
于 2014-02-16T20:19:01.607 回答
156

根据文档(第 3 步),您需要修改提供的 CSS 文件以指向您网站上的字体位置。

于 2013-01-16T19:29:50.200 回答
73

用这个

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

我在使用 Amazon Cloudfront CDN 时遇到了类似的问题,但在我开始从 maxcdn 加载它后它得到了解决

于 2014-09-17T09:21:35.983 回答
60

检查以确保您没有无意中更改图标上的字体系列。如果您已将 .fa 项目的字体系列更改为:FontAwesome,则该图标将不会显示。它总是愚蠢而渺小的。

于 2014-06-12T17:56:29.970 回答
23

如果您使用的是 LESS 或 SASS,请打开 font-awesome.less/sass 文件并编辑@fa-font-path: "../font";指向实际字体的路径变量:

@fa-font-path: "../font";

@font-face {
  font-family: 'FontAwesome';
  src: url('@{fa-font-path}/fontawesome-webfont.eot?v=3.0.1');
  src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('@{fa-font-path}/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

与 CSS 相同,除了您在 @font-face 声明块中编辑路径:

@font-face {
  font-family: 'FontAwesome';
  src: url('your/path/fontawesome-webfont.eot?v=3.0.1');
  src: url('your/path/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('your/path/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('your/path/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}
于 2013-01-16T19:35:32.770 回答
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">
于 2015-11-25T14:53:25.137 回答
15

我正在使用这里提到的maxcdn 作品Font Awesome 4.3.0的链接,

但是在您的服务器中托管将字体和 CSS 放在同一个文件夹中对我有用,就像这样

在此处输入图像描述

然后只需链接CSS:

<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />
于 2015-05-07T10:19:10.043 回答
15

你必须有2个班级,fas班级和fa-*班级。请参阅文档中的基本使用:

fa前缀在版本 5 中已被弃用。新的默认值是fas纯色样式和fab品牌样式。

// Correct (version >= 5)
<i class="fas fa-search"></i>    

// Wrong (version < 5)
<i class="fa fa-search"></i>
于 2018-05-02T10:34:58.807 回答
13

我试图用以前的一些解决方案来解决同样的问题,但它们在我的情况下不起作用。最后,我在 HEAD 中添加了这两行,它起作用了:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">   
于 2015-04-08T07:23:00.820 回答
12

如果您使用的是 5.* 或更高版本,那么您必须使用

all.css 或 all.min.css

包含 fontawesome.css 不起作用,因为它没有引用webfonts文件夹,也没有引用 @font-face 或 font-family

您可以通过在 fontawesome.css 或 fontawesome.min.css 中搜索 font-family 属性的代码来检查这一点

于 2019-11-15T02:36:55.850 回答
8

我遇到了这个问题并仔细完成了每一步......即使我已经使用 FA 很长时间了......然后我意识到我的邮件 css 文件中有这一行:

* {
font-family: Arial !important;
}

愚蠢的错误,但这可能会在未来提示某人!

于 2018-08-06T09:32:49.267 回答
7

我有这个问题。问题是我有一个字体系列 CSS 样式,其中 !important 覆盖了 fontawesome 字体。

于 2015-04-21T19:11:42.467 回答
6

如果您正在使用MavenApache Wicket,还请检查以下内容,以尝试解决 Font-Awesome 和未加载图标的问题:

例如,如果您将文件放置在以下文件结构中

/src
 /main
  /java
   /your
    /package
     /css
      font-awesome.css
     /font
      fontawesome-webfont.eot
      fontawesome-webfont.svg
      fontawesome-webfont.svgz
      fontawesome-webfont.ttf
      fontawesome-webfont.woff

检查 1)您是否正确使用了 Package Resource Guard 以允许正确加载字体文件?

您的类中扩展 WebApplication 的示例:

@Override
public void init() {
    super.init();   
    get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());

}

检查 2)在确保所有字体都正确传输到 Web 浏览器后,检查实际传输到 Web 浏览器的内容,即字体文件的完整性是否发生了变化?使用例如 Firefox 和 DiffDog 的 Web Developer Toolbar(用于文件比较)比较源目录中的文件和传输到 Web 浏览器的文件。

特别是如果您使用 Maven,请注意资源过滤。不要过滤包含 /font 文件的文件夹 - 否则它们将被损坏。

pom.xml 中的示例

<build>
    <finalName>Your project</finalName>
    <resources>
        <resource>
            <filtering>true</filtering>
            <directory>src/main/resources</directory>
        </resource>
        <resource>
            <filtering>false</filtering>
            <directory>src/main/java</directory>
            <includes>
                <include>**</include>
            </includes>
            <excludes>
                <exclude>**/*.java</exclude>
            </excludes>
        </resource>
    </resources>
</build>

在上面的示例中,我们没有过滤包含 css 和字体文件的文件夹 src/main/java。

有关过滤二进制数据的更多信息,另请参阅文档:

http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

特别是文档警告:“警告:不要过滤具有二进制内容的文件,如图像!这很可能会导致输出损坏。如果您同时拥有文本文件和二进制文件作为资源,则需要声明两个互斥的资源集。第一个资源集定义要过滤的文件,而另一个资源集定义要复制的文件不变..."

于 2013-03-25T09:37:36.620 回答
6

截至 2018 年 12 月,我发现使用 bootstrapcdn 上托管的稳定版本 4.7.0 而不是他们网站上的 font-awesome 5.xx cdn更容易——因为每次他们升级次要版本时,以前的版本都会中断。

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

图标是一样的:

<i class="fa fa-facebook"></i>
于 2018-12-27T19:02:19.473 回答
5

font-weight: 900;

我对 Font Awesome 5 有一个不同的问题。对于 FontAwesome 图标,默认字体粗细应该是 900,但对于 span 和 i 标签,我将它改写为 400。当我纠正它时,它就起作用了。

这是他们的 Github 页面中的问题参考,https://github.com/FortAwesome/Font-Awesome/issues/11946

于 2019-05-03T22:43:21.383 回答
4

这在新版本 3.0 中应该会简单得多。最简单的方法是指向 Bootstrap CDN:http ://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

于 2013-01-18T01:32:17.947 回答
4

您必须将标题Access-Control-Allow-Origin返回到*用于您的字体文件

于 2015-07-28T14:50:49.897 回答
3

如果您的服务器是 IIS,请务必添加正确的 MIME 以提供 .woff 文件扩展名。正确的 MIME 是application/octet-stream

于 2013-05-23T08:21:26.250 回答
3

在努力寻找解决方案并且没有找到有用的官方文档之后,这为我解决了这个问题:

  1. 下载 Fontawesome.zip。我正在使用版本 5.10.2,我从这里得到它https://fontawesome.com/download
  2. zip文件里面有几个文件夹。你只需要css和webfonts文件夹 在此处输入图像描述

    1. 在您的 web 项目中创建 2 个文件夹,并将它们命名为 css 和 webfonts。 在此处输入图像描述

这些名称是强制性的。现在将 css 和 webfonts 的内容从 zip 复制到项目中的相应文件夹中。就这样!

小心字体太棒了!令人敬畏的是让用户的事情变得简单!

于 2019-09-04T08:37:58.967 回答
3

我在使用 yarn 下载 font awesome 5 时遇到了同样的问题,我添加了 min.css 文件all.js 文件。

希望这可以帮助某人

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>
于 2019-11-09T21:42:58.533 回答
2

您的字体路径可能不正确,因此 css 无法加载字体并渲染图标,因此您需要提供附加字体的搁浅路径。

@font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
于 2016-09-21T08:42:48.150 回答
2

使用这个<i class="fa fa-camera-retro" ></i>你还没有定义 fa 类

于 2016-09-21T08:48:51.077 回答
2

从版本 5 开始,如果您从该站点下载了包:

https://fontawesome.com/download

字体位于 all.css 和 all.min.css 文件中。

这是您现在使用最新版本的参考资料(替换为您的文件夹):

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">
于 2019-08-13T19:29:31.610 回答
1

我已从 3.2.1 更改为 4.0.1,文件夹是字体,现在称为字体。

src: url('../font/fontawesome-webfont.eot?v=3.2.1');

src: url('../fonts/fontawesome-webfont.eot?v=4.0.1');
于 2013-11-01T18:59:09.300 回答
1

我使用Official Font Awesome SASS Ruby Gem并通过将以下行添加到我的 application.css.scss 来修复错误

@import "font-awesome-sprockets";

解释:

font-awesome-sprockets 文件包括 sprockets assest 帮助器 Sass 函数,用于查找字体文件的正确路径。

于 2014-09-03T00:40:46.090 回答
1

如果您使用 sass 并已导入 main.scss @import '../vendor/font-awesome/scss/font-awesome.scss';

该错误可能来自在其相对路径中查找字体文件的 font-awesome.scss 文件。

所以记得覆盖 $fa-font-path 变量: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

像这样不需要在 index.html 中添加 CDN

于 2015-08-11T17:43:20.103 回答
1

仔细检查 fontawesome-all.css 文件 - 在最底部会有一个指向 webfonts 文件夹的路径。我的里面有“../webfonts”格式,这意味着css文件将从它所在的位置向上查找1级。由于我所有的 css 文件都在 css 文件夹中,并且我将字体添加到同一个文件夹中,所以这不起作用。

只需将您的字体文件夹向上移动一个级别,一切都应该很好:)

使用 Font Awesome 5.0 测试

于 2018-01-30T08:09:13.113 回答
1

与上层阶级一起使用

<div class="container">
  <i class="fa fa-facebook"></i>
</div>
于 2018-06-12T11:36:57.427 回答
1

/css/all.css 文件包含核心样式以及使用 Font Awesome 时需要的所有图标样式。/webfonts 文件夹包含上述 CSS 引用和依赖的所有字体文件。

将整个 /webfonts 文件夹和 /css/all.css 复制到项目的静态资产目录中(或者您希望保留前端资产或供应商资料的任何位置)。

将复制的 /css/all.css 文件的引用添加到要在其上使用 Font Awesome 的每个模板或页面中。

只需访问 - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself 你会得到答案。

于 2020-01-31T16:45:09.167 回答
1

必须以这种方式工作

  1. 确保你在页面顶部链接了 fontawesome cdn fontawesome cdn
  2. 确保 .fa 类没有被赋予另一个 font-family 属性。通常,当我们为页面中的所有标签指定样式时,就会发生这种情况。像这样

* {
  font-family: Arial;
}

而是使用这个

*:not(.fa){
  font-family: Arial;
}

  1. 确保你在 fontawesome 网站上输入了准确的类名。复制并粘贴以确保。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<i class="fa fa-home"></i>

于 2020-03-10T18:56:33.410 回答
1

使用(免费)Font Awesome 5 版本,有一个小细节对我来说很难弄清楚,我没有注意它:

Style   Availability    Style Prefix    Example Rendering
Solid   Free            fas             <i class="fas fa-camera"></i>
Brands  Free            fab             <i class="fab fa-font-awesome"></i>

(从文档中提取)

有了这个引用,品牌图标如fa-twitterorfa-react需要与 class 一起使用,fab所有其他(免费)图标需要与 class 一起使用fas。这很容易监督。

于 2020-04-14T18:50:34.877 回答
1

经过 5 个多小时的挣扎后,我找到了导致问题的原因。

  1. 使用 FontAwesome 5 您应该使用 fa s(注意末尾的“s”):

<i class="fas fa-camera"></i>

  1. 我使用的是“常规”字体,这显然是在这个版本中付费的——我切换到“纯色”,一切都开始正常工作了。
于 2021-04-16T19:10:07.303 回答
0

使用绝对路径而不是相对路径为我解决了这个问题。我使用的是相对路径(请参见下面的第一个示例),但这不起作用。我通过控制台检查,发现服务器返回 404,找不到文件。

相对路径导致 404:

@font-face { 
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}

绝对路径解决了它跨浏览器:

@font-face { 
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}

除非你必须这样做,否则我不建议这样做,但它对我有用。当然,您应该对 font-awesome.css 文件中的所有字体格式重复此操作。

于 2014-03-28T20:00:07.170 回答
0

它对我不起作用,因为我Allow from none的 apache 配置中有根目录的指令。这是我如何让它工作的...

我的目录结构:

root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html

我的 index.html 有:

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

我选择继续禁止访问我的根目录,而是在我的 apache 配置中为 root/font-awesome/ 添加了另一个目录条目

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>
于 2015-10-17T19:54:06.070 回答
0

我的问题是添加

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

在一个里面

<!-- build:css assets/styles/main.css -->
<!-- endbuild -->

标签

我把它放在标签外面来修复它。

于 2015-12-18T22:50:35.723 回答
0

为我解决了这个问题(在我的 Windows 7 机器上)是解密我的项目目录。在测试您的网站时,最初会出现多少视觉和功能故障,这真是太疯狂了。只需进入命令提示符并运行:

attrib -R %PROJECT_PATH%\*.* /S
cipher /a /d /s:%PROJECT_PATH%

...其中 %PROJECT_PATH% 是存储代码的目录的完整路径名。

于 2017-09-25T15:29:11.633 回答
0

现在在 fontawesome 5 中,您可以通过 Https 交付缓存版本的 JS。

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

有关https://fontawesome.com/get-started/svg-with-js的更多信息

于 2018-04-03T12:55:35.583 回答
0

我尝试了上面的一些建议但没有成功。

我使用 NuGeT 包。是(出于某种原因)多个命名版本(font-awesome、fontawesome、font.awesome 等

对于它的价值:我删除了所有安装的版本,然后只安装了最新版本的font.awesomefont.awesome无需调整或配置任何东西即可工作。

我假设其他命名版本中缺少许多东西。

于 2018-08-08T11:25:24.920 回答
0

这么多答案,所以我为我添加了我的工作(如果您不使用 PRO,请更改名称):在 _typography.less

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
  .lib-font-face(
    @family-name: @font-family-name__fontawsomeregular,
    @font-path: '@{baseDir}fonts/webfonts/fa-regular-400',
    @font-weight: 400,
    @font-style: normal
  );
  .lib-font-face(
    @family-name: @font-family-name__fontawsomelight,
    @font-path: '@{baseDir}fonts/webfonts/fa-light-300',
    @font-weight: 300,
    @font-style: normal
   );
  .lib-font-face(
    @family-name: @font-family-name__fontawsomebrands,
    @font-path: '@{baseDir}fonts/webfonts/fa-brands-400',
    @font-weight: normal,
    @font-style: normal
  );
  .lib-font-face(
    @family-name: @font-family-name__fontawsomesolid,
    @font-path: '@{baseDir}fonts/webfonts/fa-solid-900',
    @font-weight: 900,
    @font-style: normal
  );
}

在 _theme.less

@import '../includes/fontawesome/fontawesome.less';
@fa-font-path: '@{baseDir}fonts/webfonts';

//  Fonts
@font-family-name__fontawsomeregular: 'Font Awesome 5 Pro';
@font-family-name__fontawsomelight: 'Font Awesome 5 Pro';
@font-family-name__fontawsomebrands: 'Font Awesome 5 Brands';
@font-family-name__fontawsomesolid: 'Font Awesome 5 Pro';

和使用示例:

 .my-newclass:before{
     content: '\f002';
     display: inline-block;
     float: left;
     font-family:  @font-family-name__fontawsomelight;
     font-size: 16px;
}
于 2019-01-07T14:07:34.633 回答
0

请加

@import 'https://****.net/*********/font-awesome.min.css';
@font-face {
    font-family: 'FontAwesome';
    src: url('https://****.net/*********/FontAwesome.otf');
    src: url('https://****.net/*********/FontAwesome.otf?#iefix')
}

这是您的 css 顶部,正确下载并链接 css 和字体,问题是由于 FontAwesome 未正确加载。

谢谢

于 2019-03-16T05:46:16.463 回答
0

如果您font-awesome通过包管理器(yarnnpm)安装,请注意安装了哪个版本。font-awesome或者,如果您很久以前就已经安装了,请检查安装的版本。

本质上,通过包管理器安装的版本可能落后于https://fontawesome.com/网站上显示的版本。因此,就像今天(21.06.2019)一样,包管理器将安装v4.7.0作为最新版本,但网站将指向引用v5.*的文档。

解决方案,访问记录v4.7.0 https://fontawesome.com/v4.7.0图标的网站,复制适当的图标,例如<i class="fa fa-sign-in" aria-hidden="true"></i>并将其合并到您的 html 中。更多上下文可以在这里找到。

于 2019-06-21T11:47:42.370 回答
0

如果 MIME TYPE 已经具有 .woff 和 .woff2 文件类型,但仍然给出 HTTP-404 错误,请检查请求过滤。如果这是限制性的,请将这些文件类型添加为允许服务,它应该可以工作。看看这个!

于 2020-01-15T08:51:05.667 回答
-1

我今天找到了一个解决方案,它是:

  1. 从他们的 Github页面下载整个项目
  2. 然后按照他们页面上默认 CSS 部分下的其余步骤,将目录移动到您的项目中,并在 .html 文件的 HEAD 部分中添加链接

他们的文档的问题在于,他们没有指定一个链接,您应该从哪里获得整个字体真棒项目的副本以放入您的项目中。

于 2014-02-25T23:38:56.697 回答