uni-app中使用iconfont字体图标

在一些项目中,我们需要使用阿里巴巴矢量字体图标库的图标,如果单个下载势必过于麻烦,这个就是自己创建好然后进入即可。

第一步,找到阿里巴巴矢量字体图标库,登录官网 。把你需要的图标添加至购物车,创建项目

uni-app中使用iconfont字体图标_第1张图片

 

第二步,进入项目,首先选择Unicode,然后点击下载至本地

uni-app中使用iconfont字体图标_第2张图片

第三步,找到该文件,解压,然后把该解压好的文件放到所需项目的static 文件里

第四步,找到你刚才引入的图标文件(iconhome)里面的iconfont.css文件,把里面路径改为本地路径,如下

uni-app中使用iconfont字体图标_第3张图片

第五步,在App.vue文件全局引入

uni-app中使用iconfont字体图标_第4张图片

第六步,再所需页面如下方法引入,iconfont为必填,icon-weijin为你所需要字体图标的名字

uni-app中使用iconfont字体图标_第5张图片

效果图:

uni-app中使用iconfont字体图标_第6张图片

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