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


接下来就正常使用即可。

目录
相关文章
|
XML 前端开发 JavaScript
使用 svg-sprite-loader 批量引入 icon
使用 svg-sprite-loader 批量引入 icon
212 0
应用程序icon及UITabBar又上角带红圈中数字的实现
应用程序icon及UITabBar又上角带红圈中数字的实现
62 0
从0开发游戏引擎之2D基础组件的实现(Image;Label;Button)
从0开发游戏引擎之2D基础组件的实现(Image;Label;Button)
|
Android开发
NavigationView中,动态增加item以及menu
NavigationView中,动态增加item以及menu
346 0
|
前端开发
项目中自定义icon(类似ElementUI的icon)
项目中自定义icon(类似ElementUI的icon)
183 0
|
人工智能
在程序中使用自己设计的ICON图标
使用thymeleaf模板引擎,少不了图标,常用的图标库:FontAwesome、glyphicons;那么如何把自己设计的图标引用到自己的程序中去呢?
474 0
在程序中使用自己设计的ICON图标
|
C# Windows
C# 获取系统Icon、获取文件相关的Icon
原文:C# 获取系统Icon、获取文件相关的Icon 1、获取系统Icon 工具下载SystemIcon.exe using System; using System.Collections.
2372 0
|
C# Windows
WPF 4 动态覆盖图标(Dynamic Overlay Icon)
原文:WPF 4 动态覆盖图标(Dynamic Overlay Icon)      在《WPF 4 开发Windows 7 任务栏》一文中我们学习了任务栏的相关开发内容,同时也对覆盖图标(Overlay Icon)功能进行了一些介绍,其中覆盖图标是以静态方式呈现的。
1122 0
|
虚拟化 索引
UWP VirtualizedVariableSizedGridView 支持可虚拟化可变大小Item的View(一)
原文:UWP VirtualizedVariableSizedGridView 支持可虚拟化可变大小Item的View(一) Boss的需要时这样的,Item是可变大小的,同时根据不同的Window size,来确定Item的结构和大小Window 小的时候是 大的时候是这样的: 当然这size变化的过程中也允许其他结构,我这里只是举了最大和最小时候的样子。
1121 0