iconfont字型圖示的使用方法--超簡單!
這裡講解的預設是元素使用類名;
step 1:百度iconfont,找到阿裡巴巴矢量圖示庫官網,然後注冊登入,或者用github登入也行,此步驟跳過;
step 2:找到圖示管理->我的項目->然後建立項目:
右邊點選建立項目,用于儲存自己常用的圖示;
step 3:項目建立完成後,往項目裡添加我們要想使用的圖示,找到圖示庫,搜尋一個想要的圖示,然後添加到購物車(後直接添加至建立項目);
我現在将第一個安卓圖示加入我的項目,點選加入購物車
step 4:添加到購物車完成後,購物車徽章數字應該顯示1了,點選右上角的購物車圖示,選擇添加至項目,選擇我們剛剛建立的項目,确定;
自動跳轉到對應的項目裡了,如圖:
step 5:接下來一部比較關鍵,将打包好的字型檔案下載下傳到本地添加到你的項目中,在項目中引用檔案中的iconfont.css檔案;
下載下傳下來解壓後的檔案如下:
強調一次,把上面這些檔案都放在一個檔案夾内，然後放在你的項目目錄中,再在你的項目中引入iconfont.css檔案
step 6:到了最後一步了,如何在項目中使用字型圖示呢,其實很簡單,建立一個i标簽或者span标簽,添加兩個類名,一個固定的是iconfont,另一個是你想要的那個圖示對應的類名:
具體代碼如下:
好了,重新整理頁面,圖示是不是出來了呢?
Ok,到這一步,恭喜你成功了,是不是很簡單,不簡單?那就從頭再看一遍;
調節字型圖示的大小是通過元素的font-size屬性來控制的;
原文：https://www.cnblogs.com/hjvsdr/p/6639649.html