字體很棒的圖標不見了

Question

我想使用 html5 和 bootstrap.In 設計一個網站，對於我的 html 代碼，我需要 Font-Awesome 圖標。 但是當我放入font-awesome.min.css和相應的字體時，我的頁面中沒有加載 Font-Awesome 圖標。

因此，當我檢查該頁面時，我在控制台上收到以下錯誤和警告：

downloadable font: download failed (font-family: "Roboto" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: http://[::1]/futuroit/userasset/css/Fonts/Roboto/regular.ttf  style.css:9:1
downloadable font: download failed (font-family: "Roboto" style:normal weight:300 stretch:normal src index:0): bad URI or cross-site access not allowed source: http://[::1]/futuroit/userasset/css/Fonts/Roboto/roboto-light.ttf  style.css:46:1

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: http://[::1]/futuroit/userasset/fonts/fontawesome-webfont.woff?v=4.2.0  font-awesome.min.css:4:14
downloadable font: download failed (font-family: "Open Sans" style:normal weight:bold stretch:normal src index:0): bad URI or cross-site access not allowed source: http://[::1]/futuroit/userasset/css/Fonts/Open%20Sans/OpenSans-Regular.ttf

我該如何解決這個問題？

Answer 1

地址錯誤（或）配置設置丟失

1. 通過直接在瀏覽器上檢查您的地址來驗證您的地址，或者簡單地輸入來源並引用路徑。
2. 在 Firefox 上參考此可下載字體：不允許錯誤的 URI 或跨站點訪問

Answer 2

嘗試包含font-awesome.css插件而不是font-awesome.min.css因為它有時會顯示錯誤。 當您在 html 文件中包含此插件時，將其包含在所有腳本文件的上方，有時也會產生問題。

Answer 3

確保使用正確的格式與字體。

對我來說，Firefox 給出了錯誤：

downloadable font: rejected by sanitizer (font-family: "opensans-semibold" style:normal weight:400 stretch:100 src index:1) source: <path-to-font>/OpenSans-SemiBold.svg

在檢查的格式提供的文件format()為svg是不正確的：

url("../fonts/open-sans/open-sans-regular/OpenSans-Regular.svg") format("woff2");

所以格式woff2是為svg字體提供的，我更正為：

url("../fonts/open-sans/open-sans-regular/OpenSans-Regular.svg") format("svg");

問題就解決了！

Answer 4

地址錯誤（或）缺少配置設置，通過直接在瀏覽器上檢查地址來驗證您的地址，或者簡單地輸入源並引用路徑。 在 Firefox 上參考此可下載字體：不允許錯誤的 URI 或跨站點訪問

Answer 5

如果你只是添加這行代碼

  <link href="fonts/fontawesome/all.min.css" rel="stylesheet"> 

在您的頁面內，您只需要轉到 all.min.css，您就可以看到一些字體 url，您必須將它們包含在您的站點目錄中。

Answer 6

可下載字體：下載失敗（字體系列：“Font Awesome 6 Brands”樣式：正常重量：400 拉伸：100 src 索引：0）：狀態=2147746065 來源：請幫幫我