扩展icon

简介: 扩展icon

VantUI 默认提供的 icon 在真正项目中大概率上是不够用的,所以我们要扩展可用的 icon


阿里巴巴矢量图库

为了快速开发(省事),直接利用阿里巴巴矢量图库来找我们所需要的 icon


创建项目,将图标加入到项目,之后项目要配置 FontClass/Symbol 前缀和 Font Family ,如下所示:

iconfont项目配置.png


注意

我们这里将 FontClass/Symbol 前缀设置成了 van-icon-Font Family 设置成了 van-icon 是有寓意的。这个是VantUI默认的配置,网上有很多文章这里都是配置的其他名称,然后引用的时候加一个 class-prefix ,这样确实也行,但是遇到 icon 引用的就不行了,比如:Grid 宫格中就无法直接使用自定义图标,使用上述配置可以保证这里也能支持,问题就是可能和原有图标名称冲突


项目引入

接下来将项目下载到本地,下载下来的是一个 download.zip 的压缩包,解压后将里面的 iconfont.cssiconfont.tfficonfont.wofficonfont.woff2 复制到项目的 /src/assets/iconfont 文件夹下,并在 main.js 文件中引入,如下所示:

项目引入配置.png


接下来就正常使用即可。

目录
相关文章
|
3月前
扩展EXT.BUTTON
扩展EXT.BUTTON
39 8
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加?
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加?
135 0
|
前端开发 容器
layui框架实战案例(22):layui-tab-title的宽度自适应的解决方案
layui框架实战案例(22):layui-tab-title的宽度自适应的解决方案
516 0
应用程序icon及UITabBar又上角带红圈中数字的实现
应用程序icon及UITabBar又上角带红圈中数字的实现
73 0
从0开发游戏引擎之2D基础组件的实现(Image;Label;Button)
从0开发游戏引擎之2D基础组件的实现(Image;Label;Button)
|
Android开发
NavigationView中,动态增加item以及menu
NavigationView中,动态增加item以及menu
376 0
|
人工智能
在程序中使用自己设计的ICON图标
使用thymeleaf模板引擎,少不了图标,常用的图标库:FontAwesome、glyphicons;那么如何把自己设计的图标引用到自己的程序中去呢?
503 0
在程序中使用自己设计的ICON图标
|
前端开发
项目中自定义icon(类似ElementUI的icon)
项目中自定义icon(类似ElementUI的icon)
215 0
|
开发框架 小程序 开发工具
APICloud AVM框架列表组件list-view的使用、flex布局教程
avm.js 是APICloud 推出的多端开发框架。使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App,且多端渲染效果统一;全新的 App 引擎 3.0 不依赖 webView,提供百分百的原生渲染,保障 App 性能和体验与原生 App 一致。
215 0
APICloud AVM框架列表组件list-view的使用、flex布局教程