在微信小程序中使用彩色字體圖標(Iconfont)


字體圖標的使用相信大家都很熟悉,阿里圖標庫的官網地址:https://www.iconfont.cn/home/index

一般我們在開發的時候,都是使用iconfont來管理項目里面的圖標。但是我們該如何在小程序中使用彩色的字體圖標?

 

首先放圖:

 

步驟:

1、打開阿里巴巴矢量圖標庫,將自己需要的彩色圖標加入到購物車中:

 2、加入購物車后,下載至本地:

 3、解壓文件后,在文件內全局安裝iconfont 的字體文件包iconfont-tools(npm i -g iconfont-tools),然后運行iconfont-tools,生成 iconfont-weapp文件:

  4、將生成的iconfont-weapp文件復制到自己的項目中,在要使用彩色字體圖標的頁面中引入里面的文件:

 

 5、使用彩色字體圖標:class=“t-icon t-icon-xxx”

 完成!

 


免責聲明!

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



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