小程序中引入iconfont字體圖標


1、首先打開阿里巴巴字體圖標庫:https://iconfont.cn,輸入需要查找的字體圖標,比如現在需要一個購物車的圖標,那么你可以輸入gouwuche,也可以輸入cart,都可以找到想要的購物車圖標。

 

 

 

 

2、在搜索到的圖標中選擇自己需要的,點擊圖標上的購物車按鈕,即可加入到自己的購物車中。

 

 

 

 

3、點擊網頁頭部右側的購物車圖標按鈕,打開如下圖所示界面,如果現在需要的圖標是針對整個項目而言,那么就點擊“添加至項目”這個按鈕。第一次創建的話,可以選擇創建新項目按鈕,輸入項目名稱,點擊確定。

 

 

 

 

 

 

 

 

 

4、我們可以在項目中以類的形式使用這些圖標,所以選擇中間那個Font Class,並選擇“查看在線鏈接”。

 

 

 

5、出現下面這個鏈接,把這個鏈接輸入到瀏覽器地址欄中打開,然后把代碼全部復制粘貼。

 

 

 

 

 

 

 

6、在小程序項目中與pages同級目錄下創建styles文件夾,並新建iconfont.wxss文件,將上面復制的代碼粘貼到這個文件中。

 

 

 

7、在公共樣式app.wxss文件中引入字體圖標樣式css文件:

 

 

 

8、在頁面中使用字體圖標方式如下:

 

 

 

 

最終效果圖:

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM