記憶盒子

把記憶裝進灰色的盒子,封裝起來,那年那月,重新拾起。

首頁搜索目錄
search
當前主題: 互聯(lián)網(wǎng)絡(luò)

IIS7.5安裝配置Font Awesome圖標字體的方法

作者:Kaka    時間:2016-11-23 14:21:31    瀏覽:    評論:0

前一篇介紹IIS6.0安裝配置FontAwesome圖標字體運行環(huán)境,本文將介紹在IIS7.5服務(wù)器里怎樣安裝配置Font Awesome圖標字體。

1、在桌面右鍵點擊“我的電腦”,點擊“管理”。

2、展開“服務(wù)和應用程序”節(jié)點,點擊“Internet信息服務(wù)(IIS)管理器”,再選中要設(shè)置的網(wǎng)站。

打開IIS 選中網(wǎng)站

打開IIS 選中網(wǎng)站

2、雙擊“MIME類型”。

雙擊“MIME類型”

雙擊“MIME類型”

3、點擊“添加”,然后文件擴展名輸入 .woff2 ,MIME類型輸入 application/x-font-woff ,點擊“確定”。

添加woff2的MIME類型

添加woff2的MIME類型

4、至此配置完畢,無需重啟IIS,立即生效。

配置完后,我們就可以把Font Awesome字體庫文件下載到自己服務(wù)器里直接引用了,如下例所示:

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實例_文字超鏈接右邊加一個箭頭

FontAwesome實例_文字超鏈接右邊加一個箭頭

實例使用分析:

1)、本例使用的Font Awesome版本是4.6.3,有一個 .woff2 的文件,低版本(如4.2.0)無此文件,調(diào)用時應注意。

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下載

點擊下載

您可能對以下文章也感興趣

IIS6.0安裝配置FontAwesome圖標字體運行環(huán)境

Font Awesome content代碼匯總,共246個

Font Awesome圖標在IE瀏覽器不顯示的解決方法

x

標簽: FontAwesome  

※ 網(wǎng)站速度慢?試試網(wǎng)站自動優(yōu)化工具 ※

上一篇: Font Awesome content代碼匯總,共246個
下一篇: Font Awesome圖標在IE瀏覽器不顯示的解決方法

發(fā)表評論:

◎歡迎參與討論,請在這里發(fā)表您的看法、交流您的觀點。

訂閱博客                   QQ交流群(312716741)

  • 通過Google訂閱本站 通過鮮果訂閱本站 通過抓蝦訂閱本站
  • 通過QQ郵箱訂閱本站 通過Yahoo訂閱本站 通過有道訂閱本站

Search

最新評論及回復

最近留言

網(wǎng)站分類

Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

Copyright @2009-2024 All Rights Reserved. 粵ICP備14028160號-1

Powered By Z-Blog 1.8 Walle Build 91204
Copyright @2009-2024 All Rights Reserved.