Css 为什么我的图标显示为空白方块?
我在IIS8中创建了一个新的(简单的)网站。我已经创建了一个简单的Index.html,并加入了jQuery、Bootstrap3和Font Aowesome 4.0.0开始使用 但是,我的字体图标显示为空(正方形): 我的文件夹结构是Css 为什么我的图标显示为空白方块?,css,font-awesome,iis-8,woff,font-awesome-4,Css,Font Awesome,Iis 8,Woff,Font Awesome 4,我在IIS8中创建了一个新的(简单的)网站。我已经创建了一个简单的Index.html,并加入了jQuery、Bootstrap3和Font Aowesome 4.0.0开始使用 但是,我的字体图标显示为空(正方形): 我的文件夹结构是 / - Index.html - bootstrap.css - bootstrap.js - jquery-2.0.3.js /css - font-awesome.css /fonts - FontAwesome.o
/
- 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-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-woff
应用程序/x-font-woff
application/font-woff
font/woff
- 对应用程序池的完全读取权限
- 将@font-face的url()从
更改为。/font/
font/
- 删除所有其他不必要的css和js文件
- 整页刷新,清除缓存
<span class="fa-user"></span>
只是空白方块问题,但这不是我的标记问题。我正在使用wordpress和一个社交评论插件,该插件使用的id与我的fa图标所在的id相同,并且插件css覆盖了字体系列。因此,如果您的类是正确的,请确保没有其他类是您的字体系列
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
在Mikes answer的帮助下,我刚刚修复了一个类似的问题——图标显示为正方形。结果发现我有另一个被加载的实例,这导致了问题。当我应用字体系列“FontAwesome”而不是“FontAwesome Free 5”时,这就解决了这个问题。具体来说,我的问题是在Wordpress上运行带有Avada主题的WooCommerce产品搜索时遇到的。确保您的i元素具有以下css样式:
i {
font-family: FontAwesome;
}
我是这样申请的,但还是有一个问题/您还需要导入此
@import url(“https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");代码>
i {
font-family: FontAwesome;
}