Vant UI使用iconfont自定义图标

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

iconfont

让我们的UI设计小姐姐将图标上传到iconfont

注意，我们尽量让UI小姐姐将图标的前缀统一，点击右上角的 “项目设置”

下载项目

将项目下载到本地，将文件 iconfont.css 和iconfont.ttf文件放入项目文件夹/assets/icon_font

配置 main.js

在main.js 中引入iconfont.css

import './assets/icon_font/iconfont.css';

使用

<!-- 通过 class-prefix 指定类名为 icon -->
<van-icon class-prefix="icon" name="icon_function_chuku" color="#000000" size="35" />
<van-icon class-prefix="icon" name="chukuguanli" color="#000000" size="35" />

Vant UI使用iconfont自定义图标相关推荐

Vue移动端 Vant的组件使用自定义图标
Vant自带的图标比较少,有时候不能满足使用. 普通使用第三方图标我一般使用阿里图标找到自己想要的图片然后加入购物车 1.点击下载代码 2.下载完成后放在项目中,如放在src/assets下, ...
vant中van-icon使用自定义图标
第一步:组件中引入 iconfont 的样式我这里直接在main.js中引入的 import Vue from 'vue' import App from './App' import router ...
iconfont图标_在React-Native项目中轻松使用iconfont自定义图标
在开发React-Native项目的时候,为了解决图标等一系列问题,往往需要从iconfont中引入图标.为了达到这个目的,网上教程大多都需要额外安装react-native-vector-icons ...
自定义字体与iconfont字体图标
1.自定义字体 <!DOCTYPE html><html lang="en"><head><meta charset="UTF- ...
ivue-admin中自定义图标问题进行处理
介绍:ivue-admin是基于vue.js开发的一个后台管理的框架(这里不多说) 问题:在处理自定义图标的时候,出现了下面的两个问题: 首先是要导入自定义的图标文件其次是class命名问题一.解 ...
van-grid引入自定义图标无效，图标加载不出来
用van-grid布局后, 想要替换默认的图标, 结果发现替换后无效, 用浏览器控制台定位图标后发现图标的类还用的是van-icon开头, 这肯定是不对的, 我们自定义的来自iconfont的图标的前 ...
iview weapp icon组件自定义图标小程序
写小程序图标没有想要的,需要自定义的时候.可以使用阿里巴巴矢量图标库自定义图标. 找到自己需要的,然后先加入购物车,点开购物车选择下载代码,然后解压压缩包. 复制 iconfont.css中的内容,到 ...
矢量图标库如何引入html,Iconfont矢量图标库在网站中的使用方法
原标题:Iconfont矢量图标库在网站中的使用方法大家都知道现在移动端网站设计比较热门,由于移动端的网站页面的收缩性要求很高,必然在网页设计中,一些小点的图标,使用图片收缩性,以及美观上并不是很理 ...
elementUI-添加自定义图标
elementui的小图标有限,跟UI给的不一样,这个时候咋办呢?百度走起....参考了两篇博主分享的自定义elementui中的图标和建立图标库,这里主要用到第一种实际中: elementU ...

Vant UI使用iconfont自定义图标

iconfont

下载项目

配置 main.js

使用

Vant UI使用iconfont自定义图标相关推荐

最新文章

热门文章