Uni-App在小程序引入iconfont图标(超详细带图篇)

时间:2024-03-30 15:48:16

                                                      Uni-App在小程序引入iconfont图标(超详细带图篇)

 

此篇适合小白入门,大神请略过。描述有误还请指出。最近网上简书看了几篇文章,说的都不够详细,新手上去看了也是一脸懵逼。自己今天正好也用上,特此记录一下。

1.打开阿里巴巴矢量图标库,选中相对应的图标,加入项目后会出现如下图:

Uni-App在小程序引入iconfont图标(超详细带图篇)

2,新建一个css文件,把上面生成的代码复制进去,这里建议就在(static下)

 

3.选择这行在浏览器打开

Uni-App在小程序引入iconfont图标(超详细带图篇)

4,在浏览器复制得到的图标样式

Uni-App在小程序引入iconfont图标(超详细带图篇)

5,在页面写入图标标签,引入对应的小图标

Uni-App在小程序引入iconfont图标(超详细带图篇)

6在app.vue里面引入之前的css,

Uni-App在小程序引入iconfont图标(超详细带图篇)

7,刷新页面,图标就出来啦

 

Uni-App在小程序引入iconfont图标(超详细带图篇)