使用font-awesome字體圖標(biāo)庫(kù)，讓你的網(wǎng)站好看10倍

前言

在網(wǎng)站開(kāi)發(fā)中，往往需要加上一些圖標(biāo)的點(diǎn)綴來(lái)使頁(yè)面顯得更加美觀和友好。但是對(duì)于一些缺乏設(shè)計(jì)能力的人員（比如本人），想自己制作一套好看的圖標(biāo)比較麻煩。font-awesome可以幫助我們解決這個(gè)問(wèn)題。

• 阿里云官網(wǎng)使用的字體圖標(biāo)
  cdn.xitu.io/2019/5/15/16aba6097836d5ae?w=2864&h=726&f=png&s=338146">

font-awesome是一款完全免費(fèi)的基于css框架的網(wǎng)頁(yè)字體圖標(biāo)庫(kù),提供可縮放矢量圖標(biāo),它可以被定制大小、顏色、陰影以及任何可以通過(guò)CSS定義的樣式。

一、 安裝

對(duì)于個(gè)人開(kāi)發(fā)測(cè)試，可以通過(guò)免費(fèi)的cdn地址直接引入font-awesome，也可以通過(guò)npm安裝。

<link  rel="stylesheet">

二、挑選圖標(biāo)

可以去font-awesome中文網(wǎng)挑選自己想要的圖標(biāo)，地址是：http://www.fontawesome.com.cn/faicons/

三、加載圖標(biāo)

可以看到，每個(gè)圖標(biāo)后面有一個(gè)英文標(biāo)識(shí)，我們?cè)谛枰褂脠D標(biāo)的地方加上下面這個(gè)代碼就可以使用圖標(biāo)。

<i class="fa fa-英文標(biāo)識(shí)"></i>

比如聯(lián)系人那個(gè)圖標(biāo)的代碼為：

<i class="fa fa-address-book"></i>

顯示效果如下：

四、設(shè)置樣式

我們可以通過(guò)css來(lái)控制字體圖標(biāo)的樣式，比如紅色的圖標(biāo)：

<i  class="fa fa-address-book"></i>

超大的圖標(biāo)：

<i  class="fa fa-address-book"></i>

五、優(yōu)點(diǎn)

使用字體圖標(biāo)不僅可以省去設(shè)計(jì)圖標(biāo)的工作，相比使用圖片類型的圖標(biāo)，可以更方便地控制圖標(biāo)的顏色、大小等樣式,圖標(biāo)懸浮變色等特效可以直接通過(guò)css的hover來(lái)實(shí)現(xiàn)，還可以減少頁(yè)面對(duì)圖片的請(qǐng)求量，提高網(wǎng)站的加載速度和提升用戶體驗(yàn)。

• 關(guān)注微信公眾號(hào)“全棧社區(qū)”，可獲取更多站長(zhǎng)、開(kāi)發(fā)者必備的前端、后端、運(yùn)維技術(shù)干貨。

• 旭貓?jiān)?9元VPS、建站主機(jī)