字体很棒的图标不见了答案

【问题标题】：Font-awesome icons are missing字体很棒的图标不见了
【发布时间】：2017-12-28 07:12:15
【问题描述】：

我想设计一个使用 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

我该如何解决这个问题？

【问题讨论】：

您的网址中的[::1] 是什么？
在没有 IPv6 地址的情况下尝试一下。另外，您可以在引用字体的地方发布源 CSS 吗？
@noobcode localhost/futuroit

标签： css html fonts

【解决方案1】：

地址错误（或）配置设置丢失

通过直接在浏览器上查看地址来验证您的地址，或者只需输入来源并引用路径即可。
参考这个Downloadable font on firefox: bad URI or cross-site access not allowed

【讨论】：

【解决方案2】：

尝试包含 font-awesome.css 插件而不是 font-awesome.min.css，因为有时它会显示错误。当您在 html 文件中包含此插件时，有时会将其包含在所有脚本文件的上方，这也会产生问题。

【讨论】：

好的，你有没有在文件中包含这样的类名

【解决方案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");

问题就解决了！

【讨论】：

【解决方案4】：

地址错误（或）配置设置丢失通过直接在浏览器上检查地址来验证您的地址，或者简单地输入源并引用路径。在 Firefox 上参考这个可下载的字体：错误的 URI 或不允许跨站点访问

【讨论】：

【解决方案5】：

如果你只是添加这行代码

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

在您的页面内部，您只需转到 all.min.css，您就可以看到一些您必须在您的网站目录中包含的字体网址。

【讨论】：