本文轉載於:猿2048網站https://www.mk2048.com/blog/blog.php?id=hh2a2ib&title=iconfont%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95--%E8%B6%85%E7%AE%80%E5%8D%95%21

 

我之前因為專案用bootstrap比較多,所以使用font awesome字型圖示比較多,後來接觸到了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

我之前因為專案用bootstrap比較多,所以使用font awesome字型圖示比較多,後來接觸到了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屬性來控制的;

 

本文轉載於:猿2048https://www.mk2048.com/blog/blog.php?id=hh2a2ib&title=iconfont%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95--%E8%B6%85%E7%