所以我试图原型营销页面,我使用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>

但所有这些都被渲染在一个大正方形中。有人知道这是怎么回事吗?


当前回答

使用这个<i class="fa fa-camera-retro" ></i>你还没有定义fa类

其他回答

对于字体文件,必须将标题Access-Control-Allow-Origin返回为*

这对我不起作用,因为我在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">

我选择继续禁止访问我的根目录,而是在我的apache配置中为root/font-awesome/添加了另一个目录条目

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

仔细检查fontawessome -all.css文件-在最底部会有一个webfonts文件夹的路径。我的……“/webfonts”格式,这意味着CSS文件将从它所在的位置往上看一级。由于我所有的css文件都在css文件夹中,我将字体添加到同一个文件夹中,这是行不通的。

只要把你的字体文件夹向上移动一个级别,一切都应该很好:)

用字体Awesome 5.0测试

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

从他们的Github页面下载整个项目 然后按照他们页面上Default CSS部分中关于将目录移动到项目和在.html文件的HEAD部分中添加链接的其余步骤进行操作

他们的文档的问题是,他们没有指定一个链接,您应该在哪里获得整个字体的副本,并将其放入您的项目中。

如果你正在使用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

文档特别警告说:“警告:不要用 像图像一样的二进制内容!这很可能导致输出损坏。 如果您同时拥有文本文件和二进制文件作为资源,则需要 声明两个互斥的资源集。第一个资源集 属性定义要筛选的文件,其他资源集定义 要原封不动地复制文件……”