Vant UI使用iconfont自定义图标

最新推荐文章于 2024-05-06 17:03:21 发布
最新推荐文章于 2024-05-06 17:03:21 发布
阅读量1.8k 收藏 3
点赞数 1
分类专栏： VantUi 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sanfeng_hu/article/details/118093820
版权

在使用Vant UI做h5页面时，不可避免的会使用到各种小图标，但是Vant 官方提供的图标是有限的，考虑到这种情况，vant也提供了一种方法去自定义图标，自定义图标。可能有些同学看到这里也是一头雾水，下面有详细的教程

iconfont

让我们的UI设计小姐姐将图标上传到iconfont
在这里插入图片描述

注意，我们尽量让UI小姐姐将图标的前缀统一，点击右上角的 “项目设置”
在这里插入图片描述

下载项目

将项目下载到本地，将文件 iconfont.css 和iconfont.ttf文件放

最低0.47元/天 解锁文章
前端三疯
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vantUI 获得piker选中值的自定义ID操作
01-21
vantUI官网：picker 官网例子 export default { data() { return { columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'] }; }, methods: { onChange(picker, value, index) { console.log('当前值'+value...
Vant 使用 iconfont 自定义图标
qq_33160523的博客
11-24 3052
vant官方文档 刚开始看官方文档不是很清楚，后面百度加上自己验证后才弄清楚使用方法 一、到iconfont下新建一个项目 https://www.iconfont.cn/ 这里的Font Family就是对应vant的class-prefix属性，FontClass/Symbol 前缀设为Font Family后面加上’- 二、把所需的图标加入的新建的项目 选择对应图标加入购物车 点击右上角购物车然后加入新建的项目 下载然后把文件夹解压复制到项目src/下某个目录，（demo.css和demo
vant使用自定义图标
m0_52364694的博客
08-20 1937
1.组件添加icon-prefix属性，属性值为iconfont图标前缀 2.left-icon添加属性值"一半的图标名和iconfont"
vue3怎么调用vant中的icon组件
最新发布
zzx262625的博客
05-06 428
这通常需要在项目中配置额外的 CSS 或 SVG 资源，并在使用 Icon 组件时指定正确的图标名字。在 Vue 3 中调用 Vant（一个基于 Vue 的移动端 UI 组件库）的 Icon 组件，你需要首先确保已经正确地安装了 Vant。如果你只打算使用 Vant 中的一部分组件，而不是全部，那么你可以使用按需引入的方式来减少项目的体积。在你的 Vue 组件或页面中使用 Icon 组件，就像上面示例中展示的那样。你可以在项目的 Babel 配置文件中添加这个插件的配置。属性来指定要显示的图标的名字。
vue项目引入外部图标
xc9711的博客
09-05 5556
以vantui框架为例教大家vue项目如何引入外部图标
vant表单组件+iconfont组合使用 - 代码篇
草巾冒小子的博客
06-27 2604
vant框架的 form表单组件、iconfont , 组合使用案例。 案例截图 templete代码： <van-cell-group> <!-- 手机号码 --> <van-field v-model="username" clearable type="tel" label="" :label-width="labeWidth" right-icon="" placeholder="请输入11位手机号码
vant自定义引入iconfont图标以及字体
weixin_61710685的博客
03-17 4953
修改想要了解vantUI的可以点击https://youzan.github.io/vant/#/zh-CN/intro因为vantUI给的图标非常少，为了满足自己的需求，就应该找到一种方法来向vant添加自己自定义的图标，对于自定义图标我想到一种引入vant引入iconfont图标的方法就是阿里的iconfont矢量图库。
vantUI 自定义引入iconfont图标（3种风格）- 案例篇
草巾冒小子的博客
05-28 2154
文章目录vantUI 自定义引入iconfont图标（3种方法：含案例截图）效果图 · 对比：重要代码`（3种代码格式）`：全局引入 · 代码：项目文档 · 目录结构本地document文件夹 · 截图：`demo案例`代码 · 调用截图： vantUI 自定义引入iconfont图标（3种方法：含案例截图） 效果图 · 对比： 重要代码（3种代码格式）： <span class="iconfont icon-ai-safe" style="font-size:30px;"></s
【Vant4】Vant4使用自定义图标(阿里图标)
此人太懒，没有任何简介
12-22 3438
Vant4使用自定义图标(阿里图标)
vant引入iconfont
weixin_46252229的博客
03-26 633
vant引入iconfont
给vant侧边导航＜van-sidebat＞添加小图标
weixin_40252368的博客
06-21 1169
最近想优化一下自己做的功能小界面，于是盯上了侧边导航栏的样式。这个vant组件的侧边导航栏，默认不支持添加图标的功能，只能自己强行添加，所以这个方法也适用于其他需要添加图标的地方。优化前优化后这里记录一下处理方法。提示：以下是本篇文章正文内容，下面案例可供参考这个方法适用于所有组件，但是因为要操作DOM，所以不建议大量使用，会影响效率。
vant picker+popup 自定义三级联动案例
01-21
picker选择器的数据由columns属性控制，columns中有几个元素就代表该选择器有多少级，通过change方法来给对应列赋值。 columns = [{ values: column1, // 对应列的值 defaultIndex: 0, // 默认选中项索引 ...
vue使用vant UI布局.rar
05-10
vue使用vant UI实现简单的移动端布局 实现时要先全局安装npm i 以及vant
详解如何在微信小程序开发中正确的使用vant ui组件
10-18
主要介绍了详解如何在微信小程序开发中正确的使用vant ui组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-vant-template:带有VantUI的Vue移动项目模板
05-20
模板Vue移动端项目模板，组件库项目设置$ yarn install编译和热重装以进行开发$ yarn run serve编译并最小化生产$ yarn run build整理和修复文件$ yarn run lint:fix自定义配置请参阅。
关于iconfont在vant组件中自定义的解决方案
qq_37978839的博客
09-16 1980
关于使用iconfont在vant-icon中的自定义 我们知道，vant的组件虽然功能很强大，而且图标也很多，但是我们还是会发现它的图标库并不能满足我们所有的需要，所以我写了这篇博客来记录如何在van-icon中自定义图标 在vant的官方文档icon图标这章有一个属性是class-prefix,官方文档的解释是自定义图标时进行应用，那么这个究竟是什么意思呢。当我们使用van-icon中的只传入name值为plus时，我们在生成的dom树中查看，会发现他会生成一个i标签，并携带类名 <i class
vant中van-icon使用自定义图标
Greenhand_BN的博客
07-20 7354
第一步：组件中引入 iconfont 的样式 我这里直接在main.js中引入的 import Vue from 'vue' import App from './App' import router from './router' import Vant from 'vant'; import 'vant/lib/index.css'; import "./assets/icon/iconfont.css" Vue.config.productionTip = false Vue.use(Vant);
vant使用iconfont图标
u014644574的博客
05-31 2566
1、登录官网 登录https://www.iconfont.cn/，这是一个很好用的图标库。 2、选择自己需要的图标，添加到购物车 3、进入购物车，添加图标至项目 4、修改class名称 5、下载代码 6、存放到assets/iconfont中 下载下来是个压缩包，解压。主要是这些文件。为了方便管理，比如存放到assets/iconfont中，其中demo的那两个文件可以不放进去。打开demo_index，可以查看信息。 7、引用 import "@/asse...
Vant自定义图标
zxl0428的博客
01-06 5673
使用本地字体文件 Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 CSS 文件，并在项目中配置url-loader import ‘vant/lib/icon/local.css’;（替换为本地） 自定义图标 如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可...
Vant UI中使用iconfont实现自定义图标
06-01
要在Vant UI中使用iconfont实现自定义图标，需要以下步骤： 1. 在iconfont官网上选择需要的图标，并下载对应的字体文件。 2. 将字体文件放置在项目中，通常可以在`src/assets/fonts`目录下创建一个新的子目录。 3. 在项目中引入字体文件，可以在`src/main.js`文件中使用`@font-face`来引入字体文件，例如： ```javascript @font-face { font-family: 'iconfont'; src: url('@/assets/fonts/iconfont.eot'); src: url('@/assets/fonts/iconfont.eot?#iefix') format('embedded-opentype'), url('@/assets/fonts/iconfont.woff2') format('woff2'), url('@/assets/fonts/iconfont.woff') format('woff'), url('@/assets/fonts/iconfont.ttf') format('truetype'), url('@/assets/fonts/iconfont.svg#iconfont') format('svg'); } ``` 4. 在组件中使用`van-icon`组件来显示自定义图标，需要将`name`属性设置为`iconfont`，并将`class`属性设置为`iconfont`和对应图标的类名，例如： ```vue <template> <van-icon class="iconfont icon-email" /> </template> <script> export default { name: 'MyComponent', }; </script> <style> .iconfont { font-family: 'iconfont' !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> ``` 通过以上步骤，就可以在Vant UI中使用iconfont实现自定义图标了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值