微信小程序引入iconfont彩色图标

1.进入https://www.iconfont.cn/官网

2.将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中


示例图片

3.打开目标项目,下载代码至本地Window+R打开控制面版,输入cmd—点击enter键

iconfont项目

4.将下载的文件进行解压,命名为iconfont

5.Window+R打开控制面版,输入cmd—点击enter键

6.切换到iconfont文件夹

7.输入下列命令行----点击enter键

npm install -g iconfont-tools

8.运行命令行: iconfont-tools----点击enter键

9.出现如图所示的内容,按图示输入文件名即可

控制面板示例

10.打开iconfont文件夹即可看到生成的目标文件 iconfont-weapp

11.打开iconfont-weap文件夹

12.将iconfont-weapp-icon.wxss(默认生成的文件名字)放入到小程序的项目文件夹下

13.iconfont图标的引入(app.wxss里引入文件)

app.wxss文件


14.使用实例

<cover-view class="t-icon t-icon-图标名"></cover-view>

//eg:

<cover-view class="t-icon t-icon-ningboyinhang"></cover-view>

15.注意:

使用cover-view标签在电脑端调试时iconfont图标会显示,但在真机上不显示,此时需要将cover-view标签改为view标签,其余部分内容不变。

eg:

<view class="t-icon t-icon-ABC"></view>

16.最终效果如图所示:

效果图

17.修改图标的大小(通过设置width和height来修改)

.t-icon { width: 24px; height: 24px; }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容