你的位置： >
> 配置nginx支持font awesome图标字体
font awesome是专为Bootstrap而创造的图标字体，因其通过字体库实现了大多数常用的图标而闻名。
按照Font Awesome的官方文档引入相关css和tff等字体文件之后，结果所有的图标都是乱码。查看网络请求，是有相关tff和woff文件的请求，就是图标不显示。
首先怀疑的是响应头的内容类型(Content-Type)，对比查看一下，果然不对，正常的应该是application/x-font-ttf或font/x-woff等格式，这说明问题之一就是响应头。
找到nginx的mime配置文件，果然是没有字体相关的匹配，于是添加以下代码：
application/x-font-tt
font/opentype
application/vnd.ms-fo
font/x-woff
字体的响应头对了，可还是乱码，马上怀疑是不是跨域问题。查找资料发现果然是跨域问题，在firefox由于访问控制而引起跨域，而在chrome下正常。于是添加可以接收来自任意源的请求，在nginx中配置如下：
if ($request_filename ~* ^.*?/([^/]*?)$){
set $filename $1;
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
add_header Access-Control-Allow-Origin *;
再次访问，可爱的图标出现了！
anyShare分享到：
转载请注明： &
与本文相关的文章百度CDN跨域引用Bootstrap Glyphicons字体异常
使用百度前端公共库CDN服务（）的站长需要引起注意：
如果站点引用了百度CDN提供的Bootstrap Glyphicons字体，在使用较新版本的浏览器（包括Chrome 38+，Firefox 33+，以及IE 11等）访问这些包含Glyphicons字体的页面时，会无法正确显示Bootstrap Glyphicons字体。
使用360提供的前端公共库CDN服务（/）替换百度公共库CDN服务，可以解决上述问题。
通过Chrome浏览器开发者工具的Network选项卡查看资源请求，可见glyphicons字体文件的请求响应出现异常，如下图所示。
上述测试页面的代码如下：
&script src="/jquery/1.10.2/jquery.min.js" type="text/javascript"&&/script&
&script src="/bootstrap/3.0.3/js/bootstrap.min.js"&&/script&
&link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /&
margin: 15
font-size: 20
font-weight:
&p&&script src="/jquery/1.10.2/jquery.min.js" type="text/javascript"&&/script&&/p&
&p&&script src="/bootstrap/3.0.3/js/bootstrap.min.js"&&/script&&/p&
&p&&link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /&&/p&
&i class="glyphicon glyphicon-plus-sign"&&/i&
异常提示信息为：
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 'null' is therefore not allowed access.
来源于''的字体文件加载请求已经被&跨域资源共享策略&阻塞。在请求的资源头部没有找到&访问-控制-允许-来源&。来源'null'（引用该字体文件的请求来源）因此被禁止访问。所以下列Bootstrap Glyphicons字体文件的访问请求被阻塞：
/bootstrap/3.0.3/fonts/glyphicons-halflings-regular.woff
/bootstrap/3.0.3/fonts/glyphicons-halflings-regular.ttf
故障原因可能与百度CDN的跨域资源共享（Cross-Origin Resource Sharing policy）策略配置不正确有关。
跨域资源共享协议（Cross-Origin Resource Sharing policy）是页面层次的控制模式。每一个页面需要返回一个名为&Access-Control-Allow-Origin&的HTTP头来允许外域的站点访问。你可以仅仅暴露有限的资源和有限的外域站点访问。在COR模式中，访问控制的职责可以放到页面开发者的手中，而不是服务器管理员。当然页面开发者需要写专门的处理代码来允许被外域访问。
关于Corss-Origin Resource Sharing协议的更多信息，可以参阅博文：&
本文链接：请尊重作者的劳动成果，转载请注明出处！书影博客保留对文章的所有权利。
如果您喜欢这篇博文，欢迎您捐赠书影博客：
没有类似日志
欢迎来到的博客
本博客基于
提供云计算资源
十一月 2014
周一周二周三周四周五周六周日为什么nginx环境下bootstrap中font-awesome图标显示不出来_百度知道
为什么nginx环境下bootstrap中font-awesome图标显示不出来
知道智能回答机器人
我是知道站内的人工智能，可高效智能地为您解答问题。很高兴为您服务。
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁3637人阅读
web design（1）
15:10:34&　　来自:&&(上海)&
　　[Bootstrap]()
是由两个 twitter 员工开发并开源的前端框架，目前已经到了 2.0.4 的版本，在 [Github]()
上面有 32517个 watch，和 6608个 fork。非常火爆，而如此火爆自然有它的道理，在我们团队的所有项目中正全面推行使用 Bootstrap，我想根据自己的实际使用体验来说明一下为什么要用 Bootsrap。&
　　## twitter 出品&
　　首先，Bootstrap 出自 twitter，大厂出品，并且开源，自然久经考验，减少了测试的工作量。站在巨人的肩膀上，不重复造轮子。&
　　同时，Bootstrap 的代码有着非常良好的代码规范，从中也可以学习到很多，在 Bootstrap 的基础之上创建项目，日后代码的维护也变得异常简单清晰。&
　　## 基于 Less、丰富的 Mixin&
　　如果你不知道 [Sass]() 或者 [Less]()
这样的 CSS 预处理技术，我只能说你实在太落伍了，建议你先去了解之。&
　　Bootstrap 的一大优势就是它是基于 Less 打造的，并且也有 [Sass版本]()
。正因为如此，它一推出就包含了一个非常实用的 Mixin 库任你调用。&
　　举个很简单的例子，当你平时要用到一些 css3 属性的时候，你要写不同的浏览器写不同的 -prefix-，比如圆角 border-radius ：&
　　 -webkit-border-radius: 10&
　　 -moz-border-radius:10&
　　 -border-radius:10&
　　但是通过 Bootstrap 给你预设好的 mixin，你直接写成这样就可以了：&
　　 @include border-radius (10px);&
　　是不是轻松愉快？基本常用的 CSS3 mixin 都帮你整理好了，你都直接调用就可以了，在此不一一举例。 Bootstrap 是目前最好的基于 Less(Sass) 的前端框架，丰富而实用的 Mixin 应该是其最好的地方。&
　　## 可以 Responsive 的栅格系统&
　　Bootstrap 的 [栅格 (Grid)]()
系统也很先进，整个 Grid 系统是可以 Responsive 的！如果你还不知道 [Responsive Design]()，那么你太落伍了，建议你了解之。&
　　Bootstrap 已经帮你搭好了实现 Responsive Design 的基础框架，并且非常容易修改。如果你是一个新手，Bootstrap 可以帮助你在非常短的时间内上手 Responsive Design。&
　　## 丰富的组件&
　　Bootstrap 的[HTML组件]()
和 [Js组件]()
非常丰富，并且代码简洁，非常易于修改，你完全可以在其基础之上修改成自己想要的任何样子。这是工作效率的极大提升。&
　　## 插件&
　　另外、由于 Bootstrap 的火爆，又出现了不少围绕 Bootstrap 而开发的插件。其中最实用的莫过于 [Font Awesome]()
了。它是一套 icon font，提供了丰富的 icon 给你选择，新的 2.0 版又根据网友的意见增加了70个新的 icon。&
　　在现在一股有 Apple 带领的 Retina 潮流下，对图片的视网膜屏下的解决方案已经变得越来越有必要了，而在 icon 这个东西上，icon font 是完美的解决方案，不用担心分辨率的问题，因为它实际上是字体。&
　　## 以上&
　　这些就是为什么要用 Bootstrap 的原因，目前市面上没有任何其他框架可以和它相媲美，但是它就虽然是一匹好马，你还是需要花费一些时间去学习它、适应它，它在日后给你带来的便利性是无可比拟的，你会后悔自己为什么没有早点接触它。&
　　### 一些题外话&
　　#### 我不喜欢用框架，我喜欢原生的写法&
　　这是我在给别人推荐 Bootstrap 的时候最常听到的话，我只能说，Bootstrap 并不能帮你完成所有事情，它只是一个的框架，在这个框架上面你依旧可以任意的发挥，并且发挥得更好，但是前提是你要驾驭得了它。&
　　如果你不够熟悉它，你确实是有时候会被它有所牵绊，但是你熟悉了之后发现了其实它没有对你进行任何限制，这需要一个过程。&
　　#### 是给无设计师的团队或者程序员用的&
　　对此我真的是无力吐槽，Bootstrap 的开发者就在他的博客上抱怨过，为什么出来那么一堆完全照搬 Bootstrap 样式的网站。&
　　记住、完全用 Bootstrap 的样式只会让人心生厌烦。&
　　原文发自我的[博客]()，我是一名互联网创业者，我会在我的博客中记录我的创业历程，夹杂了一些生活，欢迎订阅。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：296170次
积分：3436
积分：3436
排名：第6449名
原创：37篇
转载：133篇
评论：26条
(1)(1)(1)(7)(1)(6)(1)(1)(3)(7)(6)(3)(5)(3)(5)(6)(3)(1)(28)(4)(17)(4)(8)(3)(1)(2)(3)(3)(9)(6)(2)(2)(5)(4)(5)(13)为什么nginx环境下bootstrap中font-awesome图标显示不出来_百度知道
为什么nginx环境下bootstrap中font-awesome图标显示不出来
加上svg试一下 location ~* \.(eot|otf|ttf|woff|svg)$ {
add_header Access-Control-Allow-Origin *;}
知道智能回答机器人
我是知道站内的人工智能，可高效智能地为您解答问题。很高兴为您服务。
其他类似问题
为您推荐：
bootstrap的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁}