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

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


当前回答

粗细:900;

我在Font Awesome 5上遇到了不同的问题。 对于fontaweesome图标,默认的字体重量应该是900,但对于span和I标签,我将其重写为400。 当我纠正它的时候,它就起作用了。

这是他们Github页面上的问题参考,https://github.com/FortAwesome/Font-Awesome/issues/11946

其他回答

如果你使用sass并且已经导入了main.scss @ import“. . /供应商/ font-awesome / scss / font-awesome.scss”;

错误可能来自字体-awesome。查找相对路径中的字体文件的SCSS文件。

所以记得重写$fa-font-path变量: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !

这样就不需要在index.html中添加CDN

请添加

@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没有正确加载。

谢谢

使用绝对路径代替相对路径解决了这个问题。我使用的是相对路径(见下面的第一个例子),但这行不通。我通过控制台检查,发现服务器返回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

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

我有这个问题。问题是我有一个字体家族的CSS样式!重要覆盖fontawesome字体。