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

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

其他回答

你必须有2个类,fa类和类识别所需的图标fa-twitter, fa-search,等等…

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>

引导5更新

注意:“fa前缀在版本5中已弃用。新的默认是fas固态样式和fab品牌样式。”- Terje Solem

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

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

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

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

请添加

@import 'https://****.net/*********/font-awesome.min.css';
@font-face {
    font-family: 'FontAwesome';
    src: url('https://****.net/*********/FontAwesome.otf');
    src: url('https://****.net/*********/FontAwesome.otf?#iefix')
}

这到你的css顶部,下载并正确链接css和字体,问题是由于FontAwesome没有正确加载。

谢谢

我已经从3.2.1更改为4.0.1,文件夹为font,现在称为fonts。

src: url('../font/fontawesome-webfont.eot?v=3.2.1');

src: url('../fonts/fontawesome-webfont.eot?v=4.0.1');

如果您的服务器是IIS,请确保添加正确的MIME以提供.woff文件扩展名。 正确的MIME是application/octet-stream