关于nginx环境下bootstrap中font-awesome图标不显示的问题

发布于 2022-09-01 05:29:42 字数 1108 浏览 18 评论 0

潜水很久,第一次在segmentfault提问题,
最近开始研究bootstrap,也发现了font-awesome这个好东西,
昨天在从网上down了一份基于bootstrap的前端模板,
发现font-awesome图标均无法正常显示,排除了浏览器的问题,
因为逐个的在safari、chrome、firefox、IE11下面都测试过了
症状为:
IE11 =》完全不显示
safari、Chorome =》 应该显示图标的地方显示了一个个的小方框
在搜索引擎搜索过一些答案,发现别人同样问题只出现在firefox上面,
原因是:nginx的跨域访问问题
解决方法是在nginx中增加一个响应头:

location ~* \.(eot|otf|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

我也按照这种方案做了,可还是无法显示
浏览器调试模式下,有个错误信息如下:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (fontawesome-webfont.woff, line 0)

用浏览器去访问这个文件也是访问不到的,提示error404!

http://localhost/admin-pages/fickle/assets/css/font-awesome/fonts/fontawesome-webfont.svg?v=4.1.0 

症状图片如下:感谢。
图片描述
12月17日补充:
问题解决了,不是nginx的问题,我犯了一个低级错误,这套html模板是我用wget下载的,在下载时候wget根据链接请求自动在字体文件扩展名后面加了参数,本来一个ttf字体变成了xxx.ttf?v=4.0.1 难怪请求字体文件提示404.修正一下文件扩展名都可以显示出来了。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

々眼睛长脚气 2022-09-08 05:29:42

肯定不是因为后面加版本的原因。。

你的呼吸 2022-09-08 05:29:42

请求404的是svg文件吗?nginx的配置里没有svg,加上svg试一下?

location ~* \.(eot|otf|ttf|woff|svg)$ {
    add_header Access-Control-Allow-Origin *;
}
春庭雪 2022-09-08 05:29:42

楼上的办法很好,解决了楼上的办法很好,解决了.

location ~* \.(eot|otf|ttf|woff|svg)$ {
    add_header Access-Control-Allow-Origin *;
}
悲欢浪云 2022-09-08 05:29:42

错误提示已经很清楚,404表示客户端错误资源找不到,建议你去看看http的所有错误代码表示的意思。

跟url后面加参数是没有影响的只是为了刷新,而且加的参数你没有用到也不会出现404错误,肯定是路径问题,或者编译后的资源没有在目标地出现,重新编译,或者是不是编译配置的问题

浊酒尽余欢 2022-09-08 05:29:42

不知道你是不是第一个写的解决办法,网上各种转发这个的.....

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文