带问号的 Glyphicon 和 Font Awesome 显示框

Glyphicon and Font Awesome displaying box with a question mark

基本上如标题所说,我的网站既不显示 Glyphicons 也不显示 Font Awesome 图标,一旦我输入代码,结果如下:http://prntscr.com/8qwwmd Glyphicon 和 Font Awesome 图标。这个问题实际上从来没有发生在我身上,这并没有影响我在 localhost 中的所有站点。

打开 javascript 控制台,查看您是否收到缺少资源的任何 404 错误。这取决于您加载 font awesome 或 glyphicon 库的方式,以及它们是否在您的文件中可见。

我假设你知道如何检查控制台,如果不知道,一般来说:

  • 右击
  • 检查元素
  • 单击显示 "console"
  • 的选项卡
  • 重新加载页面

如果这里没有发现错误,可能是网络错误被禁用了,在这种情况下:

  • 右击
  • 检查元素
  • 单击显示 "network"
  • 的选项卡
  • 重新加载页面

如果 404 不是您的问题,请确保正确包含相应的 CSS 库。如果 none 有效,请提供更多信息以说明发生了什么。

编辑

因此,根据您的评论并查看您的 JSFiddle,我发现了问题所在。您的所有资产都正确加载,但您碰巧有一个错误的 CSS 规则,它会扰乱您的代码:

font-family: 'Lato', sans-serif !important;

此规则会覆盖 bootstrap 字形 class 上的任何默认字体,这会打乱您的代码。删除“!important”使其工作,我建议这样做,因为你不想在全局 css 选择器上使用 !important。

font-family: 'Lato', sans-serif;