扩展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


接下来就正常使用即可。

目录
相关文章
|
9月前
有关element UI el-table 跟el-dialog搭配使用出现的问题,背景问题,穿透问题
有关element UI el-table 跟el-dialog搭配使用出现的问题,背景问题,穿透问题
437 0
|
4月前
扩展EXT.BUTTON
扩展EXT.BUTTON
41 8
|
8月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
从0开发游戏引擎之2D基础组件的实现(Image;Label;Button)
从0开发游戏引擎之2D基础组件的实现(Image;Label;Button)
|
前端开发
项目中自定义icon(类似ElementUI的icon)
项目中自定义icon(类似ElementUI的icon)
220 0
|
Dart 开发者
【Flutter】Image 组件 ( 内存加载 Placeholder | transparent_image 透明图像插件 )
【Flutter】Image 组件 ( 内存加载 Placeholder | transparent_image 透明图像插件 )
351 0
【Flutter】Image 组件 ( 内存加载 Placeholder | transparent_image 透明图像插件 )
|
C# Windows
C# 获取系统Icon、获取文件相关的Icon
原文:C# 获取系统Icon、获取文件相关的Icon 1、获取系统Icon 工具下载SystemIcon.exe using System; using System.Collections.
2437 0
|
C# Windows
WPF 4 动态覆盖图标(Dynamic Overlay Icon)
原文:WPF 4 动态覆盖图标(Dynamic Overlay Icon)      在《WPF 4 开发Windows 7 任务栏》一文中我们学习了任务栏的相关开发内容,同时也对覆盖图标(Overlay Icon)功能进行了一些介绍,其中覆盖图标是以静态方式呈现的。
1154 0
|
Web App开发 JavaScript Android开发
第148天:js+rem动态计算font-size的大小,适配各种手机设备
需求: 在不同的移动终端设备中实现,UI设计稿的等比例适配。 方案: 布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size。 假设设计稿是宽750px来做的,书写css方便计算考虑,根节点的font-size假定为100px,得出设备宽为7.5rem。
1866 0

热门文章

最新文章