Question

所以我正在尝试对营销页面进行原型设计，我正在使用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>

但所有这些都会在一个大广场上呈现出来。有谁知道会发生什么？

Answer 1

您必须拥有2个类，fa类以及标识所需图标fa-twitter，fa-search等的类...

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

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

Answer 2

根据documentation（步骤3），您需要修改提供的CSS文件以指向您网站上的字体位置。

Answer 3

使用此

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

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

Answer 4

这可能有所帮助，检查以确保您没有无意中更改了图标上的字体系列。如果您更改了.fa项目的字体系列：FontAwesome，则不会显示图标。它总是愚蠢而小。

希望能有所帮助。

Answer 5

如果您使用的是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;
}

Answer 6

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

Answer 7

我试图用一些以前的解决方案解决同样的问题，但它们在我的情况下不起作用。最后，我在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">

Answer 8

我正在使用<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />只是链接 maxcdn works ，如上所述here，

但在您的服务器中托管将字体和css放在同一个文件夹中，对我来说就像这样

enter image description here

然后只需链接css：

SOD

希望帮助某人。

Answer 9

我有这个问题。问题是我有一个字体系列的CSS样式！重要的是覆盖了fontawesome字体。

Answer 10

如果您正在使用 Maven 和 Apache 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和font文件的文件夹src / main / java。

有关二进制数据过滤的更多信息，请参阅文档：

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

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

Answer 11

你必须有2个类，fas类和fa类，也许这会起作用：

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

// Correct
<i class="fa fa-search"></i>

Answer 12

我遇到了这个问题，仔细地经历了每个步骤...即使我已经使用FA已有很长时间了...然后我才意识到我的邮件css文件中包含以下内容：

* {
font-family: Arial !important;
}

愚蠢的错误，但这将来可能会引爆某人！

Answer 13

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

Answer 14

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

Answer 15

从2018年12月开始，我发现使用bootstrapcdn上的稳定版本4.7.0而不是font-awesome 5.x.x cdn on their website会更容易-因为每次他们升级次要版本时，先前版本都会中断。

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

Answer 16

从版本5开始，如果您从此站点下载了软件包：

https://fontawesome.com/download

字体在all.css和all.min.css文件中。

这是您现在使用最新版本（用您的文件夹替换）的引用的样子：

MAPIFolder.Items

Answer 17

使用此<i class="fa fa-camera-retro" ></i>您尚未定义fa类

Answer 18

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

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

Answer 19

您必须将字样 Access-Control-Allow-Origin 的标题返回 *

Answer 20

经过 5 个多小时的努力，我找到了导致我出现问题的原因。

使用 FontAwesome 5 时，您应该使用 fas（注意末尾的“s”）：

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

我使用的是“常规”字体，显然在这个版本中是付费的 - 我切换到“solid”，一切都开始正常了。

Answer 21

如果您使用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

Answer 22

有了（免费）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>

（从documentation中提取）

在引用此文字后， fa-twitter 类需要使用{strong> fa-react 等品牌图标，而 >所有其他（免费）图标都需要与 fab 类一起使用。这很容易监督。

Answer 23

/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 您将得到答案。

Answer 24

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

@import "font-awesome-sprockets";

说明：

font-awesome-sprockets文件包含sprockets assest helper Sass函数，用于查找字体文件的正确路径。

Answer 25

在努力寻找解决方案并且没有找到官方文档的帮助之后，这为我解决了这个问题：

下载Fontawesome.zip。我使用的是5.10.2版，我是从这里https://fontawesome.com/download
在zip文件中有几个文件夹。您只需要css和webfonts文件夹
1. 在您的Web项目中创建2个文件夹，并将其命名为css和webfonts。

这些名称是必需的。现在，将zip中的css和webfonts内容复制到项目中的相应文件夹中。仅此而已！

当心字体！很棒的功能使用户变得简单！

Answer 26

我已经从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'）;

我希望它对某人有所帮助。

Answer 27

答案如此之多，所以我为我添加了工作（如果不使用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;
}

Answer 28

必须以这种方式进行操作
1.确保页面顶部链接了fontawesome CDN fontawesome cdn
2.确保没有为.fa类赋予另一个font-family属性。通常，当我们为页面中的所有标签赋予样式时，就会发生这种情况。像这样

* {
  font-family: Arial;
}

改为使用

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

确保您输入了fontawesome网站中提供的确切类名。复制并粘贴以确保。

<i class="fa fa-home"></i>

Answer 29

如果MIME TYPE已经具有.woff和.woff2文件类型，并且仍然给出HTTP-404错误，请检查请求过滤。如果这是限制性的，请添加这些文件类型并允许其服务，并且该文件类型将起作用。看看吧！

Answer 30

如果您使用的是5. *或更高版本，则必须使用

all.css 要么 all.min.css

包含fontawesome.css无效，因为它没有引用 webfonts 文件夹，也没有引用@ font-face或font-family

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

Answer 31

我在用yarn下载了真棒5字体时遇到了同样的问题，我将min.css文件 ALONG 添加到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>

Answer 32

如果通过软件包管理器（yarn或npm）安装了font-awesome，请注意安装了哪个版本。另外，如果很久以前已经安装了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中。可以在here中找到更多上下文。

Answer 33

font-weight: 900;

我对Font Awesome 5的问题不同。对于FontAwesome图标，默认字体粗细应为900，但对于span和i标签，我将其重写为400。当我更正它时，它就起作用了。

以下是其Github页面https://github.com/FortAwesome/Font-Awesome/issues/11946

中的问题参考

我希望它将对某人有所帮助。

Answer 34

请添加

@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无法正确加载。

谢谢

Answer 35

它不适合我，因为我在apache配置中对根目录有Allow from none指令。这就是我如何让它发挥作用......

我的目录结构：

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

我选择继续禁止访问我的root，而是在我的apache配置中为root / font-awesome /

添加了另一个目录条目

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>

Answer 36

我尝试了以上一些建议，但没有成功。

我使用NuGeT软件包。是（出于某种原因）多个命名版本（ font-awesome，fontawesome，font.awesome等）

对于它的价值：我删除了所有已安装的版本，然后仅安装了最新版本的 font.awesome 。 font.awesome 无需调整或配置即可工作。

我认为其他命名版本缺少很多东西。

Answer 37

使用绝对路径而不是相对路径为我解决了这个问题。我正在使用相对路径（参见下面的第一个示例），但这不起作用。我通过控制台检查，发现服务器返回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文件中的所有字体格式重复这一点。

Answer 38

与上层人员一起使用

<div class="container">
  <i class="fa fa-facebook"></i>
</div>

Answer 39

现在，在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

的更多信息

Answer 40

仔细检查fontawesome-all.css文件 - 在最底部将有一个指向webfonts文件夹的路径。我有＆＃34; ../ webfonts＆＃34;其中的格式，这意味着css文件将从它的位置向上看1级。由于我的所有css文件都在css文件夹中，并且我将字体添加到同一文件夹中，因此无效。

只需将您的字体文件夹移动到一个级别，一切都应该很好：）

使用Font Awesome 5.0进行测试

Answer 41

解决我项目目录的问题是解决了我的问题（在我的Windows 7机器上）。在测试您的网站时，最初会产生多少视觉和功能故障，这很疯狂。只需进入命令提示符并运行：

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

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

Answer 42

我的问题是添加

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

里面的

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

标签

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

Answer 43

我今天找到了一个解决方案：

从他们的Github page
然后按照默认CSS部分下page的其余步骤，将目录移动到项目中，并在.html文件的HEAD部分添加链接

他们的文档存在的问题是，他们没有指定一个链接，指向您应该获得要放入项目的整个字体 - 真棒项目的副本。

字体真棒不工作，图标显示为正方形

43 个答案: