為什麼Bootstrap圖示在本機載入但不線上顯示？

本地加載但未在線加載的 Bootstrap 圖標

在本地加載帶有圖標的簡單 Bootstrap 按鈕時，圖標顯示正確。然而，將應用程式部署到 Windows Azure 後，該圖示被替換為一個奇怪的前綴。出現此問題的原因是應用程式嘗試從本地和線上的不同位置載入圖示檔案。

本地，瀏覽器從 /Content/fonts/glyphicons-halflings-regular.woff 加載圖標文件，而在線時，它嘗試從 /fonts/glyphicons-halflings-regular.woff 加載它。主要差異在於 Azure URL 中缺少 /Content 前綴。

要解決此問題，請確保捆綁的 CSS 檔案正確引用圖示檔案的位置。在此範例中，CSS 檔案使用路徑 ../fonts/glyphicons-halflings-regular.woff 引用圖示。由於捆綁了 CSS 文件，應用程式會在應用程式根目錄的 /fonts 中尋找圖示文件，這是不正確的。

要解決此問題，請重新命名捆綁包以包含/Content 前綴，如下所示：

bundles.Add(new StyleBundle("~/Content/css/bootstrapcss").Include(
                "~/Content/bootstrap/bootstrap.css"));

這可確保包名稱與所需的文件路徑匹配，並且應用程式在部署到Azure 時正確載入圖示檔案。

以上是為什麼Bootstrap圖示在本機載入但不線上顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！