所以我试图原型营销页面，我使用Bootstrap和新的字体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>
但所有这些都被渲染在一个大正方形中。有人知道这是怎么回事吗?
如果你正在使用Maven和Apache Wicket，也要检查以下内容，以尝试解决字体很棒和图标未加载的问题:
例如，如果您已将文件放在以下文件结构中
/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)您是否正确使用包资源保护，以允许正确加载字体文件?
从你的类扩展WebApplication的例子:
@Override
public void init() {
super.init();
get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());
}
检查2)在确保所有字体都正确地传输到Web浏览器后，检查实际传输到Web浏览器的内容，即字体文件的完整性是否发生了变化?比较源目录中的文件和传输到Web浏览器的文件，例如，使用Firefox和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>
在上面的例子中，我们没有过滤src/main/java文件夹，其中包含css和字体文件。
有关二进制数据过滤的更多信息，请参阅文档:
http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html
文档特别警告说:“警告:不要用
像图像一样的二进制内容!这很可能导致输出损坏。
如果您同时拥有文本文件和二进制文件作为资源，则需要
声明两个互斥的资源集。第一个资源集
属性定义要筛选的文件，其他资源集定义
要原封不动地复制文件……”
如果你正在使用LESS或SASS，打开字体-真棒。减少/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;
}
