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

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


当前回答

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

其他回答

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

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

在新的3.0版本中,这应该简单得多。最简单的方法是指向引导CDN: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

我使用官方字体Awesome SASS Ruby Gem,并通过添加以下行到我的application.css.scss来修复错误

@import "font-awesome-sprockets";

解释:

font-awesome-sprockets文件包括sprockets资产助手Sass函数,用于查找字体文件的正确路径。

我也有同样的问题,字体awesome 5下载纱线, 我添加了min.css文件和all.js文件。

希望这能帮助到某人

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>

打开你的font-awesome.css 有这样的代码:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

你必须有这样的文件夹:

font awesome -> css
             -> fonts

或者最简单的方法:

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