为啥我的图标显示为空白方块？
Posted
技术标签:
【中文标题】为啥我的图标显示为空白方块？【英文标题】：Why do my icons show up as blank squares?为什么我的图标显示为空白方块？ 【发布时间】：2013-11-05 17:01:39 【问题描述】：我在 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-woff
application/x-font-woff
application/font-woff
font/woff
应用程序池的完全读取权限
将@font-face 的url() 从../fonts/ 更改为fonts/
删除所有其他不必要的 css 和 js 文件
整页刷新，清除缓存
【问题讨论】：
【参考方案1】：我花了几个小时在这上面（承认太多了）。
问题是这段代码：
<span class="fa-user"></span>
在课堂上错过了另一个fa。应该是：
<span class="fa fa-user"></span>
【讨论】：
我是这样申请的，但是还是有问题。 :// 你也需要导入这个@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");【参考方案2】：
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
在你的字体中导入这个很棒的 CSS。
【讨论】：
【参考方案3】：刚遇到空白方块问题，但这不是我的标记的问题。我正在使用带有社交 cmets 插件的 wordpress，该插件使用与我的 fa 图标所在的相同 id，并且插件 css 覆盖了字体系列。所以，如果你的类是正确的，请确保没有其他类在劫持你的字体系列。
【讨论】：
【参考方案4】：确保您的 i 元素具有这种 css 样式：
i
font-family: FontAwesome;
【讨论】：
【参考方案5】：在 Mikes 回答的帮助下，我刚刚解决了一个类似的问题 - 图标显示为正方形。原来我加载了另一个 FontAwesome 实例，这导致了问题。当我应用字体系列“FontAwesome”而不是“Font Awesome Free 5”时，这解决了这个问题。具体来说，我在 Wordpress 上使用 Avada 主题运行 WooCommerce 产品搜索时遇到了问题。
【讨论】：
以上是关于为啥我的图标显示为空白方块？的主要内容，如果未能解决你的问题，请参考以下文章