使用font-awesome字體圖標庫，讓你的網站好看10倍

前言

在網站開發中，每每須要加上一些圖標的點綴來使頁面顯得更加美觀和友好。可是對於一些缺少設計能力的人員（好比本人），想本身製做一套好看的圖標比較麻煩。font-awesome能夠幫助咱們解決這個問題。

• 阿里雲官網使用的字體圖標

  

font-awesome是一款徹底免費的基於css框架的網頁字體圖標庫,提供可縮放矢量圖標,它能夠被定製大小、顏色、陰影以及任何能夠經過CSS定義的樣式。

1、 安裝

對於我的開發測試，能夠經過免費的cdn地址直接引入font-awesome，也能夠經過npm安裝。

<link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/fontawesome.min.css" rel="stylesheet">
複製代碼

2、挑選圖標

能夠去font-awesome中文網挑選本身想要的圖標，地址是：www.fontawesome.com.cn/faicons/

3、加載圖標

能夠看到，每一個圖標後面有一個英文標識，咱們在須要使用圖標的地方加上下面這個代碼就可使用圖標。

<i class="fa fa-英文標識"></i>
複製代碼

好比聯繫人那個圖標的代碼爲：

<i class="fa fa-address-book"></i>
複製代碼

顯示效果以下：

4、設置樣式

咱們能夠經過css來控制字體圖標的樣式，好比紅色的圖標：

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

超大的圖標：

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

5、優勢

使用字體圖標不只能夠省去設計圖標的工做，相比使用圖片類型的圖標，能夠更方便地控制圖標的顏色、大小等樣式,圖標懸浮變色等特效能夠直接經過css的hover來實現，還能夠減小頁面對圖片的請求量，提升網站的加載速度和提高用戶體驗。

---

• 關注微信公衆號「全棧社區」，可獲取更多站長、開發者必備的前端、後端、運維技術乾貨。

• 旭貓雲19元VPS、建站主機