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