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 *;
                }

   }
原文地址:https://www.cnblogs.com/Tommy-Yu/p/5509023.html