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

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

其他回答

如果你通过包管理器(yarn或npm)安装了font-awesome,请注意安装的是哪个版本。或者,如果你很久以前就安装了font-awesome,检查一下安装的版本。

本质上,通过包管理器安装的版本可能落后于https://fontawesome.com/网站上显示的版本。因此,今天(2019年6月21日)包管理器将安装v4.7.0作为最新版本,但网站将指向v5.*的文档。

解决方案,访问v4.7.0的图标文档网站https://fontawesome.com/v4.7.0,复制适当的图标,例如<i class="fa fa-sign-in" aria-hidden="true"></i>,并将其合并到您的html中。更多信息可以在这里找到。

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

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

使用这个

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

我有类似的问题与亚马逊Cloudfront CDN,但它得到了解决后,我开始加载它从maxcdn

与上层阶级一起使用

<div class="container">
  <i class="fa fa-facebook"></i>
</div>

在苦苦寻找解决方案,但发现官方文档没有帮助之后,这为我解决了问题:

下载fontawessome .zip。我使用版本5.10.2,我得到了它从这里https://fontawesome.com/download 在zip文件中有几个文件夹。你只需要css和webfonts文件夹 在你的web项目中创建2个文件夹,命名为css和webfonts。

这些名字是必须的。现在从压缩文件中复制css和webfonts的内容到项目中的相应文件夹中。这就是全部!

当心fontawesome !卓越就是让事情变得简单!