所以我正在尝试原型化营销页面，我正在使用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>
但所有这些都在一个大广场上呈现出来。有谁知道会发生什么？
根据documentation（步骤3），您需要修改提供的CSS文件以指向您网站上的字体位置。
你必须有2个类，fas类和fa类，也许这会工作：
// Wrong
<i class="fas fa-search"></i>
// Correct
<i class="fa fa-search"></i>
如果您正在使用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
特别是文档警告：“警告：不要过滤带有像图像这样的二进制内容的文件！这很可能会导致输出损坏。如果同时有文本文件和二进制文件作为资源，则需要声明两个互斥的资源集。第一个资源集定义了要过滤的文件，另一个资源集定义了要复制的文件......“
这在新版本3.0中应该更简单。最简单的是指向Bootstrap CDN：http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome
我有这个问题，并仔细检查了每一步......即使我已经使用FA多年了...然后我意识到我在我的邮件css文件中有这一行：
* {
font-family: Arial !important;
}
愚蠢的错误，但这可能会在将来给某人提示！
截至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>
如果您的服务器是IIS，请确保添加正确的MIME以提供.woff文件扩展名。正确的MIME是application/octet-stream
您必须将头文件Access-Control-Allow-Origin返回到*以获取字体文件
您的字体路径可能不正确，因此css无法加载字体并呈现图标，因此您需要提供附加字体的搁浅路径。
@font-face {
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
使用这个你没有定义fa类的<i class="fa fa-camera-retro" ></i>
font-weight: 900;
我对Font Awesome 5有一个不同的问题。对于FontAwesome图标，默认字体重量应为900，但我将其覆盖为400以获得span和i标签。当我纠正它时，它才奏效。
这是他们的Github页面中的问题参考，https://github.com/FortAwesome/Font-Awesome/issues/11946
我希望它能帮助别人。
你必须有2个类，fa类和标识所需图标fa-twitter，fa-search等的类......
<!-- Wrong -->
<i class="fa-search"></i>
<!-- Correct -->
<i class="fa fa-search"></i>
我已经从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'）;
我希望它可以帮助别人。
我使用Official Font Awesome SASS Ruby Gem并通过将以下行添加到我的application.css.scss来修复错误
@import "font-awesome-sprockets";
说明：
font-awesome-sprockets文件包含sprockets assest helper Sass函数，用于查找字体文件的正确路径。
如果您使用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
仔细检查fontawesome-all.css文件 - 在最底部将有一个指向webfonts文件夹的路径。我的中有“../webfonts”格式，这意味着css文件将从它的位置向上看1级。由于我的所有css文件都在css文件夹中，并且我将字体添加到同一文件夹，因此无效。
只需将您的字体文件夹移动到一个级别，一切都应该很好:)
使用Font Awesome 5.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文件中的所有字体格式重复这一点。
它不适合我，因为我在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>
我的问题是添加了
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
在里面
<!-- build:css assets/styles/main.css -->
<!-- endbuild -->
标签
我把它放在标签外面来修理它。
为我（在我的Windows 7机器上）修复问题的原因是解密我的项目目录。在测试您的网站时，最初会产生多少视觉和功能故障，这很疯狂。只需进入命令提示符并运行：
attrib -R %PROJECT_PATH%\*.* /S
cipher /a /d /s:%PROJECT_PATH%
...其中％PROJECT_PATH％是存储代码的目录的完整路径名。
现在在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>
与上层阶级一起使用
<div class="container">
<i class="fa fa-facebook"></i>
</div>
用这个
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
我在Amazon Cloudfront CDN上遇到了类似的问题，但是在我开始从maxcdn加载后它得到了解决
我尝试了上面的一些建议没有成功。
我使用NuGeT包。是（由于某种原因）多个命名版本（font-awesome，fontawesome，font.awesome等）
为了它的价值：我删除了所有安装的版本，然后只安装了最新版本的font.awesome。 font.awesome刚刚工作，无需调整或配置任何东西。
我假设其他命名版本中缺少许多东西。
这可能会有所帮助，请检查以确保您没有无意中更改了图标上的字体系列。如果您更改了.fa项目的字体系列：FontAwesome，则不会显示图标。它总是愚蠢而小巧。
希望能帮助别人。
如果您使用的是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;
}
打开你的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">
我试图用一些以前的解决方案解决同样的问题，但它们在我的情况下不起作用。最后，我在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">
我正在使用Font Awesome 4.3.0只是连接从maxcdn作品提到here，
但是要在你的服务器上托管将字体和css放在同一个文件夹中，就像这样
然后只需链接css：
<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />
希望帮助某人。
我有这个问题。问题是我有一个字体系列的CSS样式！重要的是覆盖了fontawesome字体。