阿里iconfont自定义在zan ui icon组件里

1.在阿里iconfont下载 ttf文件和iconfont.css并引入到项目文件夹；记住只需要两个文件就可以了

2.如果要重新添加字体图标那么需要重新下载iconfont并重新替换掉 ftt文件和在iconfont.css 文件添加想对应的icon代码就可以了

3.使用方式

<van-icon name="shebei" />

自定义

.icon-shebei:before { content: "\eb63"; }@font-face {font-family: 'custom-iconfont';src: url('./iconfont.ttf') format('truetype');
}.van-icon {font-family: 'vant-icon', 'custom-iconfont' !important;
}.van-icon-shebei:before {content: '\eb63';
}

阿里iconfont自定义在zan ui icon组件里相关推荐

RN TSX基于react-native-vector-icons和iconfont.cn 的生成自定义Icon组件的工具
基于react-native-vector-icons与 iconfont 的生成自定义Icon组件的工具前言准备工作使用 task-iconfont.js 实现前言原本项目中使用了 rea ...
微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件
一.通过阿里图标库生成iconfont.wxss 1.登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon 2.把需要的图标加入购物车,然 ...
阿里iconfont上传svg图片空白、或展示不全的解决方案/搜索到的icon无法改变颜色解决方案
问题1:阿里iconfont上传svg图片空白.或展示不全原因造成这个问题的原因,可能是因为sketch.dx等软件在导出svg时,自动在svg上添加了一些iconfont平台无法解析的属性造成的 ...
《微信小程序-进阶篇》组件封装-Icon组件的实现（一）
大家好,这是小程序系列的第九篇文章,从这篇开始我们将进入提高篇,在这一个阶段,我们的目标是可以较为深入的了解组件化开发,并且实践积累一些后续项目也就是原神资料站中用得着的组件: 1.<微信小程序 ...
element ui table组件扩展关于列表编辑按钮的位置放置
最近在用vue做项目,主要是用的element ui的组件,在用的过程中发现有部分组件需要扩展,改源码太折腾,成本高,就想着如何节省成本来实现这些需求,由于项目时间紧张,有些实现来也没来得及记录一下, ...
阿里重磅开源中后台UI解决方案Fusion
2018年12月16号,Fusion 在 OSC 深圳源创会年终盛典上正式开源, 这个在阿里内部跑了三年的产品,终于对外了. 可能一些业界的同学已经在某些渠道听说过阿里的 Fusion Design ...
vue-cli通过symbol引用阿里iconfont图标
官方文档中已经说明symbol引用方式有以下特点: 支持多色图标了,不再受单色限制. 通过一些技巧,支持像字体那样,通过font-size,color来调整样式兼容性较差,支持 ie9+,及现代浏览 ...
如何使用深度学习识别 UI 界面组件？
导读:智能生成代码平台 imgcook 以 Sketch.PSD.静态图片等形式的视觉稿作为输入,可以一键生成可维护的前端代码,但从设计稿中获取的都是 div.img.span 等元件,而前端大多是组 ...
ant-design-vue自定义使用阿里iconfont图标
ant-design-vue自定义使用阿里iconfont图标 ant-design-vue与vue-admin-element引用iconfont图标还是有点区别的,具体步骤如下: 第一步:从ico ...

阿里iconfont自定义在zan ui icon组件里

阿里iconfont自定义在zan ui icon组件里相关推荐

最新文章

热门文章