字型圖示使用方法——以Iconfont為例
阿新 • • 發佈：2019-02-09
字型圖示可以為前端工程和UI設計師提供一種方便高效的圖示使用方式。而Iconfont是國內功能很強大且圖示內容很豐富的向量圖示庫,提供向量圖示下載、線上儲存、格式轉換等功能，由阿里巴巴體驗團隊傾力打造,設計和前端開發的便捷工具。下面介紹一種簡單便捷的Iconfont使用方法。
1、開啟Iconfont-阿里巴巴向量圖示庫官網 http://www.iconfont.cn/
2、登入，淘寶、Github等賬號都可以登入
3、搜尋並找到你想要的圖示
將滑鼠放入圖示會出現選擇框，點選第一個新增入庫
此時，在頂部導航欄右側的購物車（庫）圖示處會顯示新新增一個圖示
點選這個購物車（庫）圖示，進行圖示管理，新增進專案
4、點選“新增至專案”按鈕，如果需要新增至新專案，點選紅框框選處
新建專案，填寫專案名稱，然後點選“確定按鈕”
5、這樣圖示就被新增進了專案
點選紅框框選處的“暫無程式碼，點此生成”，然後點選“複製程式碼”，這樣複製的程式碼是供引入的css樣式的線上路徑
6、在HTML中引入css連結檔案，使用字型圖示時，給需要的元素新增class為iconfont和字型圖示的樣式類名，字型圖示的樣式類名在網頁上可以複製
HTML程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_8hhc97l3selsdcxr.css"> </head> <body> <span class="iconfont icon-fa-headphones"></span> </body> </html>
這樣就可以在自己的網頁上顯示字型圖示了
7、如果專案使用的字型圖示發生變化，只需要更新CSS樣式的線上路徑即可。