uni-app使用iconfont-阿里巴巴矢量图标库

第一步:

    先去iconfont-阿里巴巴矢量图标库挑选要用到的图标加入购物车

第二步:

1、添加好后,点击上方购物车里的添加项目

2、没有创建过项目可以自己创建一个

uni-app使用iconfont-阿里巴巴矢量图标库_第1张图片

第三步:

    添加至项目后,把图标下载至本地

uni-app使用iconfont-阿里巴巴矢量图标库_第2张图片

第四步:

1、下载好的iconfont文件如图所示:

uni-app使用iconfont-阿里巴巴矢量图标库_第3张图片

2、除了iconfont.css其余文件一概删除

第五步

    将iconfont.css 文件放置在目标文件夹下,如图所示:

uni-app使用iconfont-阿里巴巴矢量图标库_第4张图片

第六步

1、回到iconfont网站,点击生成

uni-app使用iconfont-阿里巴巴矢量图标库_第5张图片

2、生成后,复制代码,只需要ttf格式的地址就行

uni-app使用iconfont-阿里巴巴矢量图标库_第6张图片

 3、打开项目中的iconfont.css文件,删除文件中src属性的内容

 uni-app使用iconfont-阿里巴巴矢量图标库_第7张图片

4、将复制的ttf格式的代码放进src中,如图所示:

uni-app使用iconfont-阿里巴巴矢量图标库_第8张图片

5、字体图标的使用

uni-app使用iconfont-阿里巴巴矢量图标库_第9张图片

6、最后在App.vue 的 style标签中引入iconfont.css

image.png

重新编译,最终效果如图所示:

uni-app使用iconfont-阿里巴巴矢量图标库_第10张图片

你可能感兴趣的:(uni-app,uni-app)