为什么nginx环境下bootstrap中font-font awesome图标制作显示不出来

来源：蜘蛛抓取(WebSpider) 时间：2016-02-14 05:03 标签： font awesome图标制作
Nginx服务器端解决font字体文件跨域
在页面中使用了bootstrap和font-awesome的字体图标，当通过外部链接（/...）引用css文件时会报错，字体不显示，只有把要引用的文件放在本地时字体才正常显示。
在火狐下字体图标是乱码，而谷歌是在版本升级后，才出现的（完成空白，彻底不显示）；
谷歌调试工具提示：Font
from origin ''
has been blocked from loading by Cross-Origin Resource Sharing
policy: No 'Access-Control-Allow-Origin' header is present on the
requested resource. Origin 'http://localhost' is therefore not
allowed access.
火狐调试工具提示：已阻止交叉源请求：同源策略不允许读取&&上的远程资源。可以将资源移动到相同的域名上或者启用
CORS 来解决这个问题。
在使用子域名访问根域名的CSS时，发现字体无法显示，在确保CSS和Font字体的路径加载无问题后，基本确定是因为跨域的问题。
通过Nginx模块HttpHeadersModule来添加Access-Control-Allow-Origin允许的地址。
在Nginx的conf目录下修改nginx.conf，添加以下代码：
location ~* \.(eot|ttf|woff|svg|otf)$ {
add_header Access-Control-Allow-Origin *;
本文转载至&&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。为什么nginx环境下bootstrap中font-awesome图标显示不出来_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
为什么nginx环境下bootstrap中font-awesome图标显示不出来
我有更好的答案
请求404的是svg文件吗？nginx的配置里没有svg，加上svg试一下123
location ~* \.(eot|otf|ttf|woff|svg)$ {
add_header Access-Control-Allow-Origin *;}
专注培养IT技术人才
主营：PHP培训，JAVA培训，HTML5培训，UI培训，Linux培训，Python培训
为您推荐：
其他类似问题
bootstrap的相关知识
换一换
回答问题，赢新手礼包为什么nginx环境下bootstrap中font-awesome图标显示不出来_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
为什么nginx环境下bootstrap中font-awesome图标显示不出来
我有更好的答案
请求404的是svg文件吗？nginx的配置里没有svg，加上svg试一下123
location ~* \.(eot|otf|ttf|woff|svg)$ {
add_header Access-Control-Allow-Origin *;}
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
潜水很久，第一次在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.修正一下文件扩展名都可以显示出来了。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
肯定不是因为后面加版本的原因。。
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：

我要回帖

更多关于 font awesome图标制作 的文章

 

随机推荐