在Linux Nginx安裝配置Font Awesome圖標(biāo)字體，比在windows iis簡(jiǎn)單得多，我們甚至不用任何設(shè)置，只需把font awesome字體庫(kù)文件下載到網(wǎng)站目錄里就能直接使用了，并且，最重要的是，竟然無(wú)需額外的文件和代碼，一個(gè)代碼就能在各種瀏覽器里運(yùn)行有效。要知道，iis使用的font awesome字體圖標(biāo)，在IE瀏覽器是需要單獨(dú)寫(xiě)一個(gè)針對(duì)IE的css代碼才行的，在chrome有效的css代碼在IE里是無(wú)效的。
好了，說(shuō)了那么多，回到主題，我們?cè)贚inux Nginx如何安裝配置Font Awesome圖標(biāo)字體呢？其實(shí)，很簡(jiǎn)單。
首先，下載font awesome字體庫(kù)文件，點(diǎn)擊下載。
然后，把文件上傳到網(wǎng)站根目錄，當(dāng)然你也可以把文件上傳到網(wǎng)站任何一個(gè)目錄里，關(guān)鍵是在網(wǎng)頁(yè)html代碼里寫(xiě)引用文件路徑要寫(xiě)正確。
這樣我們就可以直接使用了。請(qǐng)參考如下完整代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="zh-CN" />
<meta http-equiv="Cache-Control" content="no-transform " />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
<title>Linux Nginx安裝配置Font Awesome圖標(biāo)字體_卡卡網(wǎng) webkaka.com</title>
<style type="text/css">
@font-face {
font-family:'FontAwesome'; /* 聲明字體名稱 */
src:url("fonts/fontawesome-webfont.eot"); /* 注意文件路徑 */
src:url("fonts/fontawesome-webfont.woff") format("woff"); /* 注意文件路徑 */
font-weight:normal;
font-style:normal
}
.main-content{
width:600px;
margin:30px 30px 30px 30px;
font-family:"Microsoft Yahei",Georgia,"Times New Roman",Times,serif;
font-size:14px;
color:#333;
line-height:185%;
}
.main-content a{
font: normal normal normal 14px/1 FontAwesome; /* 與前面聲明的字體名一致 */
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration:none;
color: #c30;
}
.main-content a:after {
font-weight:normal;
font-style:normal;
margin:0px 0px 0px 3px;
text-decoration:none;
color:#c7c8c9;
content:"\f08e"; /* 這是一個(gè)超鏈接箭頭圖標(biāo) */
}
</style>
</head>
<body>
<div class="main-content">
<font style="font-size:16px;font-weight:bold">超鏈接樣式-FontAwesome實(shí)現(xiàn)文字超鏈接右邊加一個(gè)箭頭</font><br>
html里使用<a href=#>select控件</a>，非常容易就能實(shí)現(xiàn)下拉菜單的效果。但是由于<a href=#>select控件</a>只能更改長(zhǎng)度，不能更改高度和顏色等樣式，因此在網(wǎng)頁(yè)設(shè)計(jì)中有時(shí)候顯得與整體布局搭配不太美觀。
</div>
</body>
</html>
顯示結(jié)果如圖：
FontAwesome圖標(biāo)
實(shí)例下載
注意問(wèn)題
如果在各瀏覽器都看不到圖標(biāo)，則很可能是MIME配置文件漏了幾行代碼，我用的CentOS 6.5默認(rèn)是不用修改MIME文件的。MIME文件在哪里？怎樣修改呢？
首先，找到MIME文件，位置在nginx的安裝目錄里，conf文件夾下面。
MIME文件路徑
我們可以把 mime.types 這個(gè)文件下載到本地進(jìn)行修改。
打開(kāi)文件 mime.types ，看看有無(wú) application/font-woff 這行，如果無(wú)，則添加上去（加到文件最后一行后面即可）。
修改mime文件
改為再上傳上去覆蓋原文件（注：覆蓋前請(qǐng)先備份原文件）。
最后，重啟nginx，重啟命令為 /usr/local/nginx/sbin/nginx -s reload （nginx路徑要寫(xiě)對(duì)哦），使配置生效。
您可能對(duì)以下文章也感興趣
Font Awesome圖標(biāo)在IE瀏覽器不顯示的解決方法
IIS6.0安裝配置FontAwesome圖標(biāo)字體運(yùn)行環(huán)境
IIS7.5安裝配置Font Awesome圖標(biāo)字體的方法
Font Awesome content代碼匯總，共246個(gè)
