4

我在 IIS8 中创建了一个新的(简单的)网站。我创建了一个简单的Index.html并放入 jQuery、Bootstrap3 和 Font-Awesome 4.0.0 开始使用。

但是我的 Font-Awesome 图标显示为空(正方形):

演示图片

我的文件夹结构是

/
  - Index.html
  - bootstrap.css
  - bootstrap.js
  - jquery-2.0.3.js
  /css
    - font-awesome.css
  /fonts
    - FontAwesome.otf
    - fontawesome-webfont.eot
    - fontawesome-webfont.svg
    - fontawesome-webfont.ttf
    - fontawesome-webfont.woff

我的 HTML 代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Site</title>

    <link rel="stylesheet" type="text/css" href="bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="slate.css" />
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
</head>

<body>
    <div class="container">
        <h1>This is a test</h1>
        <h1>User Icon: <span class="fa-user"></span></h1>
    </div>

    <script type="text/javascript" src="jquery-2.0.3.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>
</body>

</html>

字体真棒@font-face 是:

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

Chrome 显示甚至没有下载 .woff 文件(或任何东西)(也没有 404)

Chrome 网络

我试过了

  • IE 11、火狐、铬
  • 将网站放在实时服务器上
  • 将 .woff 的 MIME 类型更改为
    • font/x-woff
    • application/x-font-woff
    • application/font-woff
    • font/woff
  • 应用程序池的完全读取权限
  • 将@font-face 的 url() 从../fonts/更改为fonts/
  • 删除所有其他不必要的 css 和 js 文件
  • 整页刷新,清除缓存
4

5 回答 5

26

我花了几个小时在这上面(承认太多了)。

问题是这段代码:

<span class="fa-user"></span>

班上又少fa了一个。它应该是:

<span class="fa fa-user"></span>
于 2013-10-26T16:46:58.823 回答
3
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

在你的字体上导入这个很棒的 CSS。

于 2014-11-18T22:27:40.563 回答
2

刚遇到空白方块问题,但这不是我的标记的问题。我正在使用带有社交评论插件的 wordpress,该插件使用与我的 fa 图标所在的相同 id,并且插件 css 覆盖了字体系列。因此,如果您的课程是正确的,请确保没有其他课程在劫持您的字体系列。

于 2014-02-12T23:34:26.313 回答
1

确保您的 i 元素具有此 css 样式:

i {
    font-family: FontAwesome;
}
于 2018-11-15T04:52:06.290 回答
0

在 Mikes 回答的帮助下,我刚刚解决了一个类似的问题 - 图标显示为正方形。原来我加载了另一个 FontAwesome 实例,这导致了问题。当我应用字体系列“FontAwesome”而不是“Font Awesome Free 5”时,这解决了这个问题。特别是在 Wordpress 上使用 Avada 主题运行 WooCommerce 产品搜索时遇到了我的问题。

于 2018-07-26T11:36:08.803 回答