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

   }
时间: 2024-10-12 16:44:48

nginx 下 bootstrap fa 字体异常问题的相关文章

解决Centos 7 下 tomcat字体异常 Font '宋体' is not available to the JVM

错误提示: SEVERE: Servlet.service() for servlet [example] in context with path [/myproject] threw exception [Request processing failed; nested exception is net.sf.jasperreports.engine.util.JRFontNotFoundException: Font '宋体' is not available to the JVM. S

Linux下添加windows字体

在Linux下使用wqy字体,在视觉效果上就已近很好了,其实没有必要添加windows字体.但是显然有些人(比如领导,^..^)就喜欢宋体.楷体,所以添加windows字体有时还是需要的,幸运的是这件事很简单. windows字体的来源可以从windows系统中拷贝. 对于大多数Linux系统,在你双击某种ttf字体时,就会打开类似于包管理器的界面,通常你可以在这个界面上选择安装字体.但是这种方式安装的字体通常只是针对某个用户(也就是你当前登录的用户)的,所以其他用户并不能使用你安装的字体(这通

学习实现bootstrap glyphicons字体

今天给大家分享一个bootstrap学习教程.我使用bootstrap很久了,内置的 glyphicons 图标,足以满足 小型项目的需求.只需要使用一个样式,即可调出图标.虽然感觉很神奇,一直没有分析他是怎么实现的,通过Chrome 开发者工具,定位到 对应的elment 后,得知他是使用的 CSS 伪元素技术. 1 <span class="glyphicons glyphicon-eur"></span> .glyphicons 定义了 所有 glyphi

Nginx下配置ThinkPHP的URL Rewrite模式和pathinfo模式支持

前面有关于lnmp环境的搭建,在此就不在赘述.下面就简述thinkPHP如何在nginx下开启url_rewrite和pathinfo模式支持 主要有两个步骤: 一.更改php.ini将;cgi.fix_pathinfo=0  改为cgi.fix_pathinfo=1 二.更改nginx配置文件中php的location设置pathinfo模式: location ~ \.php { root html; fastcgi_pass 127.0.0.1:9000; fastcgi_index in

ThinkPHP3.2.3 Nginx 下 URL_MODEL 的配置

ThinkPHP3.2.3 的 URL_MODEL 包括普通模式(0).PATHINFO 模式(1).REWRITE 模式(2).兼容模式(3)等 4 种 URL 模式.在 Apache 下只要在配置文件 config.php 中配置 URL_MODEL 配合 .htaccess 就可以很容易地支持 REWRITE 模式. 在 Nginx 下设置项目的 URL 模式可以参考 老朱亲自写的,最完美ThinkPHP Nginx 配置文件,支持以上 4 种 URL 模式. 我测试的环境是 CentOS

【铜】第174-9篇 一对一视频录制(九)一对多学生端删除白板及nginx下配CI

关键词:webm文件在手机端播放, 一对多学生端删除白板, nginx下配CI 一.一对一视频录制 1.1.webm文件在手机端播放 1)在PC上 a.)用谷歌浏览器播放 http://123.57.206.36:8014/uploads/177013288141499069939723.webm 2)手机端播放 二.一对多 2.1 网址 1)备份上 老师端:https://123.57.206.36:9101/demos/index.html?roomid=888&teaNameMobile=

Nginx下支持ThinkPHP的Pathinfo和URl Rewrite模式

Nginx下支持ThinkPHP的Pathinfo和URl Rewrite模式 BY 孙 权 · 2014年8月6日 我的环境 系统 : Ubuntu12.04 x86_64 环境 : Nginx1.1.19+PHP5.3.10+Mongo2.6.3 由于公司要用Nginx+Mongo+PHP,所以我要把刚刚配置好的LAMP推翻,然后重新安装LNMP.软件安装就不在这里介绍了,如果有需要,可以看这里. 如何安装Nginx. 下面介绍如何使Nginx支持ThinkPHP的Pathinfo和URL

CodeIgniter框架——nginx下的配置

odeigniter(CI)是一个轻量型的PHP优秀框架,但是它是在apache服务器下开发的,在nginx下需要特别的配置才可以使用. 对nginx的配置如下: 1 server { 2 listen 80 default_server; 3 listen [::]:80 default_server ipv6only=on; 4 5 root /home/mqx/openflow/openflow/openflow/web; 6 index index.html index.htm inde

python: HTML之 鼠标放上去下拉项字体显示不同颜色

鼠标放上去下拉项字体显示不同颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <style> .menu:hover { color: red; display: b