vue和小程序项目中使用iconfont的方法
更新时间：2020年05月19日 14:22:50 作者：小鱼吃虾米
这篇文章主要介绍了vue中和小程序中使用iconfont的方法，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
一、vue中使用iconfont
1、百度搜索iconfont或者阿里巴巴矢量图标库官网，注册登录；
2、找到图标管理->新建项目，或者使用已有的项目，用于保存自己的图标；
3、搜索自己需要的icon；
4、添加到购物车中；
5、购物车中就有了相应icon
6、点击购物车，选择添加至项目。就是我们刚才创建的项目或者之前已有的项目
7、点击确定，即可将icon添加到我们的项目中
8、然后点击我的项目，找到自己的项目，即可看到刚才添加的icon
9、点击下载至本地
10、将下载的压缩包进行解压
11、打开解压好的文件夹，找到iconfont.css
12、把解压好的文件夹放入项目目录下，在vue项目中的index.html中引入即可使用
如可以放在public文件夹下
13、在组件中使用
总结：
三步搞定
1、将iconfont下载至本地
2、在项目中引入文件
3、vue中直接使用，然后使用i标签，通过类来规定使用的icon
4、小程序中把iconfont.css的后缀名改为wxss，在项目中直接使用i标签即可
到此这篇关于vue和小程序项目中使用iconfont的方法的文章就介绍到这了,更多相关vue小程序使用iconfont内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Mock.js 是一个用于生成随机数据和拦截 Ajax 请求的 JavaScript 库,它非常适合在前端开发中模拟后端 API,尤其是在前后端分离的开发模式下,本文给大家介绍了如何在Vue2项目中使用Mock.js,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了uniapp vue与nvue轮播图轮播图组件的实例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-12-12
今天小编就为大家分享一篇vue 修改 data 数据问题并实时显示的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
vscode根据eslint保存⾃动修复配置,下面这篇文章主要给大家介绍了关于vscode中eslint配置保存自动修复代码的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-12-12
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
这篇文章主要介绍了Vue通过getAction的finally来最大程度避免影响主数据呈现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
这篇文章主要介绍了Vue3造轮子之打包构建配置二级目录方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了vue如何解决数据加载时,插值表达式闪烁问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
这篇文章主要为大家详细介绍了VUE响应式原理的实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
详解vue-cli脚手架build目录中的dev-server.js配置文件
这篇文章主要介绍了详解vue-cli脚手架build目录中的dev-server.js配置文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了基于脚手架创建Vue项目实现步骤详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
最新评论