Question

我在IIS8中创建了一个新的（简单）网站。我创建了一个简单的 Index.html 并放入jQuery，Bootstrap3和Font-Awesome 4.0.0开始玩。

然而，我的Font-Awesome图标显示为无（正方形）：

Demo image

我的文件夹结构

/
  - 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-Awesome @ 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 network

我试过

IE 11，Firefox，Chrome
将网站置于实时服务器上
将.woff的MIME类型更改为
- font/x-woff
- application/x-font-woff
- application/font-woff
- font/woff
对应用程序池的完全读取权限
将@ font-face的网址（）从../fonts/更改为fonts/
删除所有其他不必要的css和js文件
整页刷新，清除缓存

Answer 1

我花了好几个小时（太多不承认）。

问题是这段代码：

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

在班上缺少另一个fa。它应该是：

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

Answer 2

刚出现空白方块问题，但这不是我的标记问题。我正在使用带有社交评论插件的wordpress，它使用与我的fa图标所在的id相同的id，并且插件css覆盖了font-family。所以，如果你的类是正确的，请确保没有其他类正在劫持你的字体系列。

Answer 3

@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

将此字体导入您的字体真棒CSS。

Answer 4

在Mikes的帮助下，我刚刚解决了一个类似的问题-图标显示为正方形。原来我有另一个FontAwesome实例正在加载，这引起了问题。当我应用字体家族“ FontAwesome”而不是“ Font Awesome Free 5”时，可以解决此问题。具体来说，在Wordpress上运行带有Avada主题的WooCommerce产品搜索时遇到了我的问题。

Answer 5

确保您的i元素具有以下CSS样式：

i {
    font-family: FontAwesome;
}

为什么我的图标显示为空白方块？

5 个答案: