极乐门资源网 Design By www.ioogu.com

一、vue中使用iconfont

1、百度搜索iconfont或者阿里巴巴矢量图标库官网,注册登录;

2、找到图标管理->新建项目,或者使用已有的项目,用于保存自己的图标;

vue和小程序项目中使用iconfont的方法

3、搜索自己需要的icon;

vue和小程序项目中使用iconfont的方法

4、添加到购物车中;

vue和小程序项目中使用iconfont的方法

5、购物车中就有了相应icon

vue和小程序项目中使用iconfont的方法

6、点击购物车,选择添加至项目。就是我们刚才创建的项目或者之前已有的项目

vue和小程序项目中使用iconfont的方法

7、点击确定,即可将icon添加到我们的项目中

vue和小程序项目中使用iconfont的方法

8、然后点击我的项目,找到自己的项目,即可看到刚才添加的icon

vue和小程序项目中使用iconfont的方法

9、点击下载至本地

vue和小程序项目中使用iconfont的方法

10、将下载的压缩包进行解压

vue和小程序项目中使用iconfont的方法

11、打开解压好的文件夹,找到iconfont.css

vue和小程序项目中使用iconfont的方法

12、把解压好的文件夹放入项目目录下,在vue项目中的index.html中引入即可使用

如可以放在public文件夹下

vue和小程序项目中使用iconfont的方法
vue和小程序项目中使用iconfont的方法

13、在组件中使用

vue和小程序项目中使用iconfont的方法

总结:

三步搞定

1、将iconfont下载至本地
2、在项目中引入文件
3、vue中直接使用,然后使用i标签,通过类来规定使用的icon
4、小程序中把iconfont.css的后缀名改为wxss,在项目中直接使用i标签即可

标签:
vue,使用iconfont,小程序使用iconfont

极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“vue和小程序项目中使用iconfont的方法”

暂无vue和小程序项目中使用iconfont的方法的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。