vant ui使用外部icon(阿里iconfont)

前端 681浏览 2 评

1、从iconfont上下载自己想要的图标(添加到购物车然后下载代码

2、解压后将iconfont.css(样式)和iconfont.tff(字体)导入到项目中

3、在main.js或main.ts中导入icon样式

import './assets/css/iconfont.css'

4、修改iconfont.css文件

@font-face {
    font-family: "youriconname";
    src: url('./iconfont.ttf') format('truetype');
}

.iconfont {
    font-family: "youriconname" !important;
    font-size: 16px;
    font-style: normal;
}

5、在页面中使用即可

<van-grid-item class="iconfont" icon-prefix="icon" icon="youriconname" clickable>
<van-icon class="iconfont" class-prefix="icon" name="youriconname" />

上一篇

共有 2 条评论

  1. wzp2020

    锟斤拷 烫烫烫