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

潜水很久,第一次在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.修正一下文件扩展名都可以显示出来了。

阅读 26.8k
5 个回答

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

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

location ~* \.(eot|otf|ttf|woff|svg)$ {
    add_header Access-Control-Allow-Origin *;
}
新手上路,请多包涵

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

location ~* \.(eot|otf|ttf|woff|svg)$ {
    add_header Access-Control-Allow-Origin *;
}
新手上路,请多包涵

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏