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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3渲染器与编译器深入浅析

    Vue3渲染器与编译器深入浅析

    这篇文章主要为大家介绍了Vue3渲染器与编译器深入浅析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Vue之常用的内置指令详解

    Vue之常用的内置指令详解

    这篇文章主要为大家介绍了Vue之常用的内置指令,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • vue3+pinia用户信息持久缓存token的问题解决

    vue3+pinia用户信息持久缓存token的问题解决

    本文主要介绍了vue3+pinia用户信息持久缓存token的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue相同路由跳转强制刷新该路由组件操作

    vue相同路由跳转强制刷新该路由组件操作

    这篇文章主要介绍了vue相同路由跳转强制刷新该路由组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 如何基于Vue制作一个猜拳小游戏

    如何基于Vue制作一个猜拳小游戏

    Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式,下面这篇文章主要给大家介绍了关于如何基于Vue制作一个猜拳小游戏的相关资料,需要的朋友可以参考下
    2023-01-01
  • Element ui table表格内容超出隐藏显示省略号问题

    Element ui table表格内容超出隐藏显示省略号问题

    这篇文章主要介绍了Element ui table表格内容超出隐藏显示省略号问题,具有很好的参考价值,希望对大家有所帮助,
    2023-11-11
  • vue3+vite+ts父子组件之间的传值

    vue3+vite+ts父子组件之间的传值

    随着vue2的落幕,vue3越来成熟,有必要更新一下vue3的父子组件之间的传值方式,这里介绍下vue3+vite+ts父子组件之间的传值方式实例详解,感兴趣的朋友一起看看吧
    2023-12-12
  • 浅谈Vue.js之初始化el以及数据的绑定说明

    浅谈Vue.js之初始化el以及数据的绑定说明

    今天小编就为大家分享一篇浅谈Vue.js之初始化el以及数据的绑定说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue如何设置描点跳转到对应页面

    vue如何设置描点跳转到对应页面

    这篇文章主要介绍了vue如何设置描点跳转到对应页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • vue项目使用lodash节流防抖函数问题解决方案

    vue项目使用lodash节流防抖函数问题解决方案

    在lodash函数工具库中,防抖 _.debounce 和节流 _.throttle 函数在一些频繁触发的事件中比较常用,这篇文章主要介绍了vue项目使用lodash节流防抖函数问题与解决,需要的朋友可以参考下
    2023-10-10

最新评论