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 文件夾下一份，上傳到服務器上。經過測試，相關的圖片能正確顯示了。問題解決