溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在網站開發中，往往需要加上一些圖標的點綴來使頁面顯得更加美觀和友好。但是對于一些缺乏設計能力的人員（比如本人），想自己制作一套好看的圖標比較麻煩。font-awesome可以幫助我們解決這個問題。
font-awesome是一款完全免費的基于css框架的網頁字體圖標庫,提供可縮放矢量圖標,它可以被定制大小、顏色、陰影以及任何可以通過CSS定義的樣式。
對于個人開發測試，可以通過免費的cdn地址直接引入font-awesome，也可以通過npm安裝。
<link rel="stylesheet">可以去font-awesome中文網挑選自己想要的圖標，地址是：http://www.fontawesome.com.cn/faicons/
可以看到，每個圖標后面有一個英文標識，我們在需要使用圖標的地方加上下面這個代碼就可以使用圖標。
<i class="fa fa-英文標識"></i>比如聯系人那個圖標的代碼為：
<i class="fa fa-address-book"></i>顯示效果如下：
我們可以通過css來控制字體圖標的樣式，比如紅色的圖標：
<i class="fa fa-address-book"></i>超大的圖標：
<i class="fa fa-address-book"></i>使用字體圖標不僅可以省去設計圖標的工作，相比使用圖片類型的圖標，可以更方便地控制圖標的顏色、大小等樣式,圖標懸浮變色等特效可以直接通過css的hover來實現，還可以減少頁面對圖片的請求量，提高網站的加載速度和提升用戶體驗。
關注微信公眾號“全棧社區”，可獲取更多站長、開發者必備的前端、后端、運維技術干貨。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
