带问号的 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;
基本上如标题所说,我的网站既不显示 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;