为什么我的图标显示为空白方块？
Row*_*man 3 css woff iis-8 font-awesome font-awesome-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-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)
我试过了
- IE 11,Firefox,Chrome
- 将站点放在实时服务器上
- 将.woff的MIME类型更改为
font/x-woffapplication/x-font-woffapplication/font-wofffont/woff
- 应用程序池的完全读取权限
- 将@ font-face的url()更改
../fonts/为fonts/ - 删除所有其他不必要的css和js文件
- 整页刷新,清除缓存
Row*_*man 26
我花了好几个小时(太多不承认).
问题是这段代码:
<span class="fa-user"></span>
fa在课堂上想念另一个人.它应该是:
<span class="fa fa-user"></span>
- 我应用这种方式,但仍然存在问题.:/ (2认同)