我在IIS8中創建了一個新的(簡單的)網站。我創建了一個簡單的Index.html，并放入jQuery、Bootstrap3和Font-Awesome 4.0.0開始使用。
然而，我的字體圖標顯示為空(正方形):
我的文件夾結構是
/
- 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，火狐，Chrome 將網站放在實時服務器上 正在更改的MIME類型。向...致敬 字體/x-woff 應用程序/x-font-woff 應用程序/字體-woff 字體/woff 對應用程序池的完全讀取權限 將@font-face的url()從../fonts/ to fonts/ 刪除所有其他不必要的css和js文件 整頁刷新，清除緩存 我在這上面花了幾個小時(多到無法承認)。
問題在于這段代碼:
<span class="fa-user"></span>班上又少了一個fa。應該是:
<span class="fa fa-user"></span>在你的字體awesome CSS上導入這個。
只是有空白正方形的問題，但這不是我的標記的問題。我正在使用wordpress的一個社會化評論插件，它使用了和我的fa圖標相同的id，插件css覆蓋了字體系列。所以，如果你的類是正確的，確保沒有其他類劫持你的字體系列。
確保您的I元素具有這種css樣式:
i {
font-family: FontAwesome;
}我剛剛解決了一個類似的問題——圖標顯示為正方形——在Mikes答案的幫助下。原來我有另一個FontAwesome實例被加載，這導致了問題。當我應用字體系列“字體真棒”而不是“字體真棒免費5”時，這個問題就解決了。具體來說，我的問題是在Wordpress上用Avada主題運行WooCommerce產品搜索時遇到的。
首先，我認為你應該在主網站注冊，然后輸入你的電子郵件，他們會給你發送一個特殊的html鏈接標簽，把它放在你的頭上。
那么這里的代碼就有問題
<span class="fa-user"></span>因為它應該是
<span class="fa-soild fa-user"></span>然后，如果這不起作用，嘗試將標記從span切換到I
像這樣
<i class="fa-soild fa-user"></i>并將這一行也添加到您的css中
i {
font-family: FontAwesome;
}我希望它有所幫助