所以我试图原型营销页面,我使用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>
但所有这些都被渲染在一个大正方形中。有人知道这是怎么回事吗?
使用绝对路径代替相对路径解决了这个问题。我使用的是相对路径(见下面的第一个例子),但这行不通。我通过控制台检查,发现服务器返回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文件中的所有字体格式重复此操作。
如果你正在使用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
文档特别警告说:“警告:不要用
像图像一样的二进制内容!这很可能导致输出损坏。
如果您同时拥有文本文件和二进制文件作为资源,则需要
声明两个互斥的资源集。第一个资源集
属性定义要筛选的文件,其他资源集定义
要原封不动地复制文件……”