nginx 下 bootstrap fa 字体异常问题

    server {
                listen       8082;        #
                server_name  192.168.16.88;   #
                root    /home/ywt/workspace/kuF/web/statics;  #
                autoindex on;             #
                autoindex_exact_size off; #
                autoindex_localtime on;   #
   }

 

原配置如上，实际图标加载出来乱七八糟；

 

经过具体分析，实际css文件正常加载，字体找到，可能 url(../) 访问异常，即获取上级文件夹字体异常。

@font-face{
    ...
    src:url('../fonts/fontawesome-webfont.eot?v=4.0.3');
    src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') 
    ...
}

 

原因是：nginx的跨域访问问题
解决方法是在nginx中增加一个响应头：

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

 

问题得解。完整配置如下：

    server {
                listen       8082;        #
                server_name  192.168.16.88;   #
                root    /home/ywt/workspace/kuF/web/statics;  #
                autoindex on;             #
                autoindex_exact_size off; #
                autoindex_localtime on;   #
                location ~* \.(eot|otf|ttf|woff)$ {
                        add_header Access-Control-Allow-Origin *;
                }

   }