fontawesome圖標字體庫組件在服務器上顯示不出來圖標的解決

這個組件在我所開發的網站中被大量使用，爲網站增色很多。在本地測試的時候全部圖標都能顯示出來，可一到服務器上就顯示不出來了。網上查列出了可能的緣由。其一，IIS沒有註冊字體類型。通過檢查，不存在這個問題。其二，css路徑不對，其三引用字體路徑不對。我有點納悶，在本地但是能正確顯示的。查看了本地和服務器fontawesome圖標字體庫css 及字體所在的目錄都存在。這會是哪裏的問題。使用瀏覽器的審查元素功能，發覺字體所在路徑是網站根目錄/fonts下。圖示以下：

顯示的是404錯誤。這與本地路徑不一致啊。本地我fontawesome組件所在路徑爲：/scripts/plugins/font-awesome4.5.0

其中引用的css文件路徑爲：/scripts/plugins/font-awesome4.5.0/css/font-awesome.css

字體路徑：/scripts/plugins/font-awesome4.5.0/fonts

在font-awesome.css 對字體的引用是這樣：

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

這在本地顯示的字體路徑是：
/scripts/plugins/font-awesome4.5.0/fonts/fontawesome-webfont.woff2?v=4.5.0 

怎麼到服務器上字體路徑變爲根目錄的fonts 下了。想到多是asp.net mvc 的打包壓縮 css 和 js 文件形成的。可是是如何形成的，並不清楚。因而我就作了下研究，想查明爲何形成這種調用字體路徑的不一樣。

查看服務器頁面中調用的css 路徑：/Content/basicCSS?v=68kc9-tXFbzdxgI98GIy_1pZTFRgNY9I60WxOBqeEmo1

而後打開這個路徑所在的css 文件，查找 fontawesome 字體引用的代碼：

@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?
查到了這個。這一分析，還真找到了錯誤的緣由。font-awesome 組件的相關 css 代碼，在服務器上被打包到虛擬目錄/Content/basicCSS 下。而這個文件中引用的有關字體代碼是../fonts/fontawesome-webfont.eot ，向上了一個目錄。那正好是根目錄下的fonts文件夾下。這就解釋通爲何服務器上引用字體文件是在根目錄下的 fonts 文件夾下了。知道了錯誤緣由，因而我把/scripts/plugins/font-awesome4.5.0/fonts 下的字體文件複製到根目錄下 fonts 文件夾下一份，上傳到服務器上。通過測試，相關的圖片能正確顯示了。問題解決