本文介紹IIS6.0安裝配置FontAwesome圖標字體運行環(huán)境，搭配完環(huán)境后可以把FontAwesome的圖標字體庫文件下載到自己服務(wù)器里進行調(diào)用，再也不用調(diào)用別人的文件了。調(diào)用別人的文件存在很多不確定事件，還是使用自己服務(wù)器里的文件最放心。
1、打開IIS，打開網(wǎng)站屬性，切換到“HTTP 頭”標簽。
切換到“HTTP 頭”標簽
2、點擊“MIME 類型”，然后在彈出窗口點擊“新建”按鈕。
點擊“MIME 類型”
3、擴展名輸入“.woff2”，MIME 類型輸入“application/x-font-woff”，點擊“確定”按鈕。
添加MIME類型
4、添加完畢，無需重啟IIS，立即生效。
這時我們就可以把FontAwesome的圖標字體庫文件下載到服務(wù)器進行調(diào)用了，如下例所示：
html代碼
<!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>FontAwesome實例_文字超鏈接右邊加一個箭頭_卡卡網(wǎng) webkaka.com</title>
<style type="text/css">
@font-face {
font-family:'FontAwesome';
src:url("fontawesome-webfont.woff2") format("woff2"); /* 注意文件路徑 */
font-weight:normal;
font-style:normal
}
.entry-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%;
}
.entry-content a {
padding-right:3px;
margin-left:3px;
margin-right:3px;
text-decoration: none;
color: #c30;
font-size:14px;
}
.entry-content a:hover {
color: blue;
}
.offsite:hover:after {
color:#666666
}
.offsite:after {
font-family:FontAwesome;
font-weight:normal;
font-style:normal;
margin:0px 0px 0px 3px;
text-decoration:none;
color:#c7c8c9;
content:"\f08e"
}
</style>
</head>
<body>
<div class="entry-content">
<font style="font-size:16px;font-weight:bold">超鏈接樣式二</font><br>
html里使用<a href=#><span class=offsite>select控件</span></a>，非常容易就能實現(xiàn)下拉菜單的效果。但是由于<a href=#><span class=offsite>select控件</span></a>只能更改長度，不能更改高度和顏色等樣式，因此在網(wǎng)頁設(shè)計中有時候顯得與整體布局搭配不太美觀。
</div>
</body>
</html>
運行效果，如圖：
FontAwesome實例_文字超鏈接右邊加一個箭頭
實例使用分析：
1)、本例使用的Font Awesome版本是4.6.3，有一個 .woff2 的文件，低版本（如4.2.0）無此文件，調(diào)用時應(yīng)注意。
2)、上述例子中，css使用的是本地文件 fontawesome-webfont.woff2 ，是的，我們實際上只需調(diào)用這一個 woff2 的文件，無需調(diào)用官網(wǎng)實例里的6個文件，大大提升了加載速度。
3)、調(diào)用 woff2 文件時，需聲明 font-family:'FontAwesome'; 。
4)、定義超級鏈接的類 offsite ，箭頭圖標的css屬性是 content:"\f08e" (Font Awesome content代碼匯總)，且要聲明 font-family:FontAwesome; 。
Font Awesome 4.6.3下載
您可能對以下文章也感興趣
IIS7.5安裝配置FontAwesome圖標字體運行環(huán)境
Font Awesome content代碼匯總，共246個
