vant中使用iconfont的图标

最新推荐文章于 2024-04-08 16:32:26 发布
最新推荐文章于 2024-04-08 16:32:26 发布
阅读量2.2k 收藏 1
点赞数 1
分类专栏： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47180815/article/details/109597873
版权
前端 同时被 2 个专栏收录
53 篇文章 1 订阅
订阅专栏
vue
43 篇文章 2 订阅
订阅专栏

  1. 在iconfont的自己的项目中 更多操作–》编辑项目
    在这里插入图片描述

  2. 编辑FontClass/Symbol 前缀
    默认为icon，我们将其修改为icon-

  3. 然后下载之后将引入的文件重新替换
    在这里插入图片描述

  4. 修改iconfont.css文件
    将原来的 font-family: "iconfont" 改为 font-family: "icon"
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  5. 参考官网
    我们来写自己的图标

<van-icon class="iconfont" class-prefix="icon" name="xiayibu" />

在这里插入图片描述
注意这里的name是icon-之后的内容
在这里插入图片描述
成功！！
之前试过直接修改iconfont.css文件没有用，就修改了项目的前缀。
不是很明白这个值什么机制，猜测前缀是以‘-’作为标识进行分割的，只修改iconfont.css中的font-family没有用。
以上是自己的见解，有什么问题大家可以在评论区指出哦

在这里插入图片描述

陌上烟雨寒
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
关于iconfont在vant组件中自定义的解决方案
qq_37978839的博客
09-16 1976
关于使用iconfont在vant-icon中的自定义 我们知道，vant的组件虽然功能很强大，而且图标也很多，但是我们还是会发现它的图标库并不能满足我们所有的需要，所以我写了这篇博客来记录如何在van-icon中自定义图标 在vant的官方文档icon图标这章有一个属性是class-prefix,官方文档的解释是自定义图标时进行应用，那么这个究竟是什么意思呢。当我们使用van-icon中的只传入name值为plus时，我们在生成的dom树中查看，会发现他会生成一个i标签，并携带类名 <i class
在微信小程序中使用vant的方法
10-16
主要介绍了在微信小程序中使用vant的方法，文中通过示例代码介绍的非常详细，对大家学习或者使用小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
在vant 中使用cell组件 定义图标该图片和位置操作
01-18
@本来想直接使用icon组件，使用阿里的图标库，可是怎么弄也不行，折腾一下午，最后决定使用最笨的办法，直接上代码 vant 中使用cell组件 定义图标该图片和位置像微信信息栏一样 <!--../../assets/tou.png--> <!----> <van-cell value=未完成 lab
Vant使用自定义图标(阿里图标)
最新发布
大圣归来圣骑士清欢的博客
04-08 928
Vant使用自定义图标
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
m0_63622279的博客
09-09 2362
将这些解压的资源全部拷贝到微信小程序的assets目录中，并且将iconfont.css重命名为iconfont.wxss。首先在当前项目的根目录中，创建assets文件夹，用于存放静态资源，assets里面的文件夹可以自己定义，图片，css…添加一个图标到iconfont项目中，点击生成在线链接，记得选unicode，然后再生成在线链接（待会儿会使用）然后对iconfont.wxss进行编辑修改，将刚刚复制的在线链接，替换掉本地的链接。下载完毕之后，将压缩包解压，会得到类似下面的目录结构。
【vant移动端表格数据排版】用vant2简单实现一个把PC端表格数据展示在移动端的排版。上拉加载更多，下拉刷新页面，新增，编辑，删除功能
seeeeeeeeeee的博客
07-05 6162
上次做了一个移动端的表格功能，纯表格的那种。跟PC一样，但是我一直觉得在移动端上写表格很糟糕的体验，毕竟手机就那么大。这不合理。但是我这公司又需要把PC端的表格的数据展示在移动端。导致我只能去试试看怎么排版比较好。由于网上也是一直找不到什么案例参考，所以就自己想了一个排版供大家参考。如果各位有更好的排版方式请发我一个图学习一下。
vue使用gif图修改v-loading的图标
weixin_45232247的博客
06-22 1278
1：修改v-loading的全局样式，可在APP.vue中设置该样式 .el-loading-spinner .circular{ width: 42px; height: 42px; animation: loading-rotate 2s linear infinite; display: none; } .el-loading-spinner{ background: url(./assets/img/loading-1.gif) no-repeat; backgrou..
vant使用iconfont图标
u014644574的博客
05-31 2550
1、登录官网 登录https://www.iconfont.cn/，这是一个很好用的图标库。 2、选择自己需要的图标，添加到购物车 3、进入购物车，添加图标至项目 4、修改class名称 5、下载代码 6、存放到assets/iconfont中 下载下来是个压缩包，解压。主要是这些文件。为了方便管理，比如存放到assets/iconfont中，其中demo的那两个文件可以不放进去。打开demo_index，可以查看信息。 7、引用 import "@/asse...
idea中jdk的配置
Z_taozi1996的博客
03-17 153
IntelliJ IDEA使用（1）——IDEA配置JDK
逝者如风
09-17 637
提前安装jdk，配置环境变量 一、配置jdk 1、依次点开File -->Project Structure，点击左侧标签页，点击SDKs 2、点击+号，选SDK 3、在弹出框选择jdk路径（我本地装了两个jdk，大家可以忽略）   4、点击OK，可以看到jdk配置好了   5、按照这个顺序，可以配置多个jdk
vant 引入iconfont的正确姿势
03-13 5334
先引入官网的自定义图标介绍 需要注意两个要点 1.引入字体（字体名称和前缀名称一致） 2.icon前缀是横杠连接 那么举例说明，如果想要如此这般使用： <van-icon class-prefix="iconfont" name="weibo" size="2rem" /> 1.前缀为iconfont 2.前缀使用横杠 具体如何操作，下面贴图： 1. 找到我的项...
Vant 使用 iconfont 自定义图标
qq_33160523的博客
11-24 3040
vant官方文档 刚开始看官方文档不是很清楚，后面百度加上自己验证后才弄清楚使用方法 一、到iconfont下新建一个项目 https://www.iconfont.cn/ 这里的Font Family就是对应vant的class-prefix属性，FontClass/Symbol 前缀设为Font Family后面加上’- 二、把所需的图标加入的新建的项目 选择对应图标加入购物车 点击右上角购物车然后加入新建的项目 下载然后把文件夹解压复制到项目src/下某个目录，（demo.css和demo
vue使用vant中的checkbox实现全选功能
01-18
本文实例为大家分享了vue使用vant中的checkbox实现全选功能的具体代码，供大家参考，具体内容如下 (item, key=index> class=listli > <p>{{ item.name
vantweapp的使用
01-20
1、官方网址打开：https://youzan.github.io/vant-weapp/#/intro 2、项目打开后选中微信小程序的项目右击——>选择终端打开——> 终端打开后输入npm init 进行...5、接下来根据官网中的提示进行使用。 作者：ym0913
在vue中使用vant TreeSelect分类选择组件操作
01-22
//先在你需要的页面中引入，第一个是弹出层,第二个是选择的 import { Popup } from vant; import { TreeSelect } from vant; 代码部分： <van-tree-select :items=items :active-id.sync=items.activeId...
vant2 定制主题 css替换
weixin_61710685的博客
03-16 545
第三步：在main.js中引入vant的less文件（别忘记引入，这个不是import 'vant/lib/index.css'文件，记得看清楚，楼主就是看错了以为引入了less文件，结果不生效，查了好几个小时）第五步：创建vue.config.js，进行配置（我的less-loader版本为5，所以删除了lessOptions）：最好在安装包的时候选择好less，后期会省很多劲，减少很多报错（楼主亲测）第四步：新建theme.less ，里面写的是你需要改的样式。第二步：less安装。
vant icon 修改
weixin_39428080的博客
09-09 667
vant icon 修改。
微信小程序开发(第四天)-引入vant插件，引入iconfont，地图页面车辆等按钮优化
梁白开的博客
09-08 554
将iconfont.css文件改为iconfont.wxss并复制到小程序项目下assets/iconfont文件夹(若没有则新建)中。在需要的页面引用如index页面，index.json中添加以下代码。由于vant组件提供的icon图标不多，按照一位博主引入教程。在index.wxml可以使用iconfont了，如下。借鉴一位博主的保姆级教程，，引入iconfont。
IDEA中的JDK配置
Acxm7799的博客
01-04 4322
（需要提前安装jdk哦，配置环境变量） 一、配置jdk 1、依次点开File –>Project Structure，点击左侧标签页，点击SDKs 2、点击+号，选SDK 3、在弹出框选择jdk路径 4、点击OK，可以看到jdk配置好了，（可以配置多个jdk，当然本地需要配置起来）
如何在vant中使用iconfont图标
05-29
要在vant中使用iconfont图标，需要先在项目中引入iconfont字体文件和相应的CSS样式文件。可以将这些文件下载到本地，也可以直接引入在线CDN资源。 然后在需要使用图标的地方，可以通过在vant组件中添加icon属性，并...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值