Font Awesome 是一套專(zhuān)門(mén)為 Twitter Boostrap 設(shè)計(jì)的圖標(biāo)字體庫(kù)。這標(biāo)字體集幾乎囊括了網(wǎng)頁(yè)中可能用到的所有圖標(biāo)，除了包含 Twitter Boostrap 的默認(rèn)圖標(biāo)外，還有社交收集圖標(biāo)、Web 應(yīng)用法度圖標(biāo)和編輯器圖標(biāo)等等，可以免費(fèi)用于各類(lèi)網(wǎng)站制作。

下面是自己建網(wǎng)站時(shí)，使用Font Awesome字體圖標(biāo)的步驟

1.到Font Awesome官網(wǎng)下載最新版本的Font Awesome；（也可以不下載，直接使用遠(yuǎn)程字體庫(kù)。方法見(jiàn)：自己做網(wǎng)站怎么使用字體圖標(biāo)）

2.解壓文件，將此中的css和fonts文件夾拷貝到項(xiàng)目中，此中css文件夾中有兩個(gè)css文件（font-awesome.css和font-awesome.min.css（壓縮版））;

3.在需要應(yīng)用的html或者其它類(lèi)型的頁(yè)面中引入樣式文件，如下：（如果不了解HTML知識(shí)，請(qǐng)學(xué)習(xí)html視頻教程）

<link href="css/font-awesome.css" rel="stylesheet" />

4.修改CSS中的路徑。打開(kāi)font-awesome.css文件，若是引用的是緊縮版的，就打開(kāi)font-awesome.min.css，打開(kāi)文件看到第一個(gè)樣式定義如下：

＠font-face {



font-family: ""FontAwesome"";



src: url（""../fonts/fontawesome-webfont.eot？v=4.1.0""）;



src: url（""../fonts/fontawesome-webfont.eot？＃iefix&v=4.1.0""） format（""embedded-opentype""）， url（""../fonts/fontawesome-webfont.woff？v=4.1.0""） format（""woff""）， url（""../fonts/fontawesome-webfont.ttf？v=4.1.0""） format（""truetype""）， url（""../fonts/fontawesome-webfont.svg？v=4.1.0＃fontawesomeregular""） format（""svg""）;



font-weight: normal;



font-style: normal;



}

檢查并修改此中的src:url（）中的路徑是不是與當(dāng)前項(xiàng)目路徑正確。

4.最后在頁(yè)面中參加響應(yīng)的html元素，并且遵守font awesome定義好的樣式為須要添加矢量圖標(biāo)的元素指定樣式。

<i class="fa fa-spinner fa-spin"></i>

<i class="fa fa-circle-o-notch fa-spin"></i>

<i class="fa fa-refresh fa-spin"></i>

<i class="fa fa-cog fa-spin"></i>

<i class="fa fa-car"></i>

<i class="fa fa-car fa-3x"></i>

這樣就可以在我們自己建網(wǎng)站時(shí)使用Font Awesome字體圖標(biāo)來(lái)替代背景圖片了。

標(biāo)簽： 建網(wǎng)站 網(wǎng)站制作

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。