字体真棒不工作，图标显示为正方形
所以我试图build立一个营销页面的原型，并使用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>
但所有这一切都在一个大广场上呈现。 有谁知道会发生什么事？
根据文档 （步骤3），您需要修改提供的CSS文件以指向您网站上的字体位置。
你必须有2个class， faclass和class级，标识所需的图标fa-twitter ， fa-search等等。
<!-- Wrong --> <i class="fa-search"></i> <!-- Correct --> <i class="fa fa-search"></i>
用这个
<link href="font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
我与Amazon Cloudfront CDN有类似的问题，但是在我从maxcdn开始加载后，它已经解决了
这可能会有所帮助， 请检查以确保您没有无意中更改了图标上的字体系列 。 如果您已将.fa项目的字体系列从：FontAwesome更改为不显示图标。 这总是愚蠢的小东西。
希望能帮助别人。
如果使用的是LESS或SASS，请打开font-awesome.less / sass文件并编辑pathvariables@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; }
除了在@ font-face声明块中编辑path之外，和CSS一样：
@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代码，如下所示：
@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">
我试图用以前的几个解决scheme来解决同样的问题，但是在我的情况下它们不起作用。 最后，我在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工作链接，
但要在您的服务器上放置字体和CSS在同一个文件夹为我工作，像这样
然后只是链接的CSS：
<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />
希望能帮助别人。
如果您正在使用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的Web Developer Toolbar和DiffDog（用于文件比较）比较源目录中的文件和传输到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
特别是文档中警告：“ 警告：不要使用图像等二进制内容过滤文件！这很可能会导致输出损坏。如果您同时具有文本文件和二进制文件作为资源，则需要声明两个互斥的资源集。第一个资源集定义要过滤的文件，另一个资源集定义要复制的文件…“
我有这个问题。 问题是我有一个字体家庭的CSS样式！重要的覆盖的fontawesome字体。
这在新版本3.0中应该更简单。 最简单的就是指向Bootstrap CDN： http : //www.bootstrapcdn.com/?v= 01042013155511#tab_fontawesome
如果您的服务器是IIS，请务必添加正确的MIME来提供.woff文件扩展名。 正确的MIME是application/octet-stream
您必须将头文件Access-Control-Allow-Origin返回给您的字体文件*
我已经从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'）;
我希望它能帮助别人。
我使用官方字体真棒SASSruby，并通过将下面的行添加到我的application.css.scss来修复错误
@import "font-awesome-sprockets";
说明：
font-awesome-sprockets文件包括用于查找字体文件的正确path的链轮集合辅助Sass函数。
如果你使用sass并导入了你的main.scss @import '../vendor/font-awesome/scss/font-awesome.scss';
该错误可能来自正在查找相对path中的字体文件的font-awesome.scss文件。
因此， 请记住重写$ fa-font-pathvariables： $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;
像这样，不需要在index.html中添加cdn
使用这个<i class="fa fa-camera-retro" ></i>你还没有定义fa类
使用绝对而不是相对path为我解决它。 我正在使用相对path（见下面的第一个例子），并没有工作。 我通过控制台进行检查，发现服务器返回404，找不到文件。
相对path造成了404：
@font-face { font-family: "FontAwesome"; src: url("../fonts/fontawesome-webfont.eot?v=4.0.3"); }
绝对path解决了它跨浏览器：
@font-face { font-family: "FontAwesome"; src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3"); }
我不会推荐这样做，除非你必须这样做，但它对我有用。 当然，你应该重复这个在font-awesome.css文件中的所有字体格式。
我在我的代码中获取该框，直到我在我的html上的标签之间添加了这个链接。 希望这可以帮助！
link href =“// maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css”rel =“stylesheet”
在本地服务器上工作时，您已经下载了css，请确保您也下载了字体文件。
要检查是否一切正常（在Firefox中）右键单击页面，检查元素，控制台，CSS和检查任何类似的东西
downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:3): status=2147746065 source: http://localhost/156/admin/css/fonts/fontawesome-webfont.ttf?v=4.3.0
这不是我的工作，因为我有我的apacheconfiguration中的根目录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">
我select继续禁止访问我的根目录，而是在我的apacheconfiguration中添加了另一个目录项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 -->
标签
我把它放在标签外面。
这可能是你的字体path不正确，所以CSS不能加载字体和渲染图标，所以你需要提供附加字体的搁浅path。
@font-face { font-family: "FontAwesome"; src: url("fonts/fontawesome-webfont.eot"); }
我有一个损坏的字体文件，虽然它似乎加载和显示正确的Chrome devtools源，它没有正确显示。 我再次下载并解决它。
我的问题是，字体文件是0kb大小，我不知道它是如何发生的，可能git问题
什么解决了我的问题（在我的Windows 7机器上）解密我的项目目录。 这是疯狂的多less视觉和function故障最初从testing您的网站时出现的。 只需进入命令提示符并运行：
attrib -R %PROJECT_PATH%\*.* /S cipher /a /d /s:%PROJECT_PATH%
…其中％PROJECT_PATH％是代码存储目录的完整path名。
我今天find了一个解决scheme：
- 从他们的Github 页面下载整个项目
- 然后按照默认CSS部分下其他页面上的步骤，将目录移动到您的项目中，并在.html文件的HEAD部分添加链接
他们的文档的问题是，他们没有指定一个链接到你应该得到一个整个font-awesome项目的副本放到你的项目中。
