前言

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

• 阿里云官網(wǎng)使用的字體圖標(biāo)

  
  
  image

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

一、 安裝

對于個人開發(fā)測試，可以通過免費的cdn地址直接引入font-awesome，也可以通過npm安裝。

<link  rel="stylesheet">

二、挑選圖標(biāo)

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

image

三、加載圖標(biāo)

可以看到，每個圖標(biāo)后面有一個英文標(biāo)識，我們在需要使用圖標(biāo)的地方加上下面這個代碼就可以使用圖標(biāo)。

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

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

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

顯示效果如下：

image

四、設(shè)置樣式

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

<i style="color:red;" class="fa fa-address-book"></i>

超大的圖標(biāo)：

<i style="font-size:30px;" class="fa fa-address-book"></i>

五、優(yōu)點

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

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

• 旭貓云19元VPS、建站主機(jī)