使用font-awesome字體圖標庫,讓你的網站好看10倍
阿新 • • 發佈:2019-05-16
加載速度 amp 公眾 link 必備 減少 user src 字體 前言
在網站開發中,往往需要加上一些圖標的點綴來使頁面顯得更加美觀和友好。但是對於一些缺乏設計能力的人員(比如本人),想自己制作一套好看的圖標比較麻煩。font-awesome可以幫助我們解決這個問題。
- 阿裏雲官網使用的字體圖標
font-awesome是一款完全免費的基於css框架的網頁字體圖標庫,提供可縮放矢量圖標,它可以被定制大小、顏色、陰影以及任何可以通過CSS定義的樣式。
一、 安裝
對於個人開發測試,可以通過免費的cdn地址直接引入font-awesome,也可以通過npm安裝。
<link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/fontawesome.min.css" rel="stylesheet">
二、挑選圖標
可以去font-awesome中文網挑選自己想要的圖標,地址是:http://www.fontawesome.com.cn/faicons/
三、加載圖標
可以看到,每個圖標後面有一個英文標識,我們在需要使用圖標的地方加上下面這個代碼就可以使用圖標。
<i class="fa fa-英文標識"></i>
比如聯系人那個圖標的代碼為:
<i class="fa fa-address-book"></i>
顯示效果如下:
四、設置樣式
我們可以通過css來控制字體圖標的樣式,比如紅色的圖標:
<i style="color:red;" class="fa fa-address-book"></i>
超大的圖標:
<i style="font-size:30px;" class="fa fa-address-book"></i>
五、優點
使用字體圖標不僅可以省去設計圖標的工作,相比使用圖片類型的圖標,可以更方便地控制圖標的顏色、大小等樣式,圖標懸浮變色等特效可以直接通過css的hover來實現,還可以減少頁面對圖片的請求量,提高網站的加載速度和提升用戶體驗。
-
關註微信公眾號“全棧社區”,可獲取更多站長、開發者必備的前端、後端、運維技術幹貨。
- 旭貓雲19元VPS、建站主機
使用font-awesome字體圖標庫,讓你的網站好看10倍