iconfont是阿里巴巴旗下的一款強大的字型圖示庫,裡面的圖示應有盡有,而且還可以自定義圖示,非常強大!下面介紹一下如何在web開發中使用這個強大的字型庫,直接上圖。
step 1:百度iconfont,找到阿里巴巴向量圖示庫官網,然後註冊登入,或者用github登入也行,此步驟跳過;

step 2:找到圖示管理->我的專案->然後新建專案:

右邊點選新建專案,用於儲存自己常用的圖示;

step 3:專案新建完成後,往專案裡新增我們要想使用的圖示,找到圖示庫,搜尋一個想要的圖示,然後新增到購物車;

我現在將第一個安卓圖示加入我的專案,點選加入購物車

step 4:新增到購物車完成後,購物車徽章數字應該顯示1了,點選右上角的購物車圖示,選擇新增至專案,選擇我們剛剛建立的專案,確定;

自動跳轉到對應的專案裡了,如圖:

step 5:接下來一部比較關鍵,將打包好的字型檔案下載到本地新增到你的專案中,在專案中引用檔案中的iconfont.css檔案;

下載下來解壓後的檔案如下:

強調一次,把上面這些檔案都放在一個資料夾內，然後放在你的專案目錄中,再在你的專案中引入iconfont.css檔案

step 6:到了最後一步了,如何在專案中使用字型圖示呢,其實很簡單,建立一個i標籤或者span標籤,新增兩個類名,一個固定的是iconfont,另一個是你想要的那個圖示對應的類名:

具體程式碼如下:

重新整理頁面,圖示就出來了！

調節字型圖示的大小是通過元素的font-size屬性來控制的;