微信小程序开发-引入阿里巴巴矢量icon图标库
2019-04-11 17:06
861 查看
先在阿里巴巴图标库下载icon图标并保存到项目里,然后下载到本地。此步骤的压缩文件命名为压缩1文件。
解压下载文件,打开转换网址https://transfonter.org/,点击 Add fonts按钮将iconfont.ttf文件上传上去,按图操作就好。此步骤的压缩文件命名为压缩2文件。
解压下载后的文件,将文件内容复制,粘贴到压缩1文件里面的iconfont.css里面,覆盖其@font-face部分,应该能一眼就看出来。
在css的.iconfont里面将font-size:16px;改成
font-size:inherit;
继承父级字体尺寸。
接着将整个文件内容复制到app.wxss里面
引用方式为:
<text class="iconfont icon-图标名"></text>
icon-图标名可以在复制过来的内容里面找到
其实就是这个
另外还要将压缩1文件里面的其他几个文件也要放在app.wxss同一个目录下,附上目录图:
PS:推荐将转换后的ttf文件改成一个wxss文件,然后将其引入到app.wxss里
相关文章推荐
- 微信小程序开发-引入阿里巴巴矢量icon图标库
- 微信小程序中引入iconfont阿里巴巴矢量图标
- 微信小程序使用阿里巴巴的矢量图标iconfont
- 微信小程序中如何使用阿里巴巴矢量图标库的iconfont字体图标?
- 微信小程序----引入外部字体库iconfont的图标
- 微信小程序如何引入外部字体库iconfont的图标
- Android 开发中 阿里巴巴矢量图标库 IconFont的使用详解
- Element引入Iconfont(阿里巴巴矢量图标库)第三方图标库
- 微信小程序 如何引入外部字体库iconfont的图标
- antd引入阿里巴巴矢量图库的icon图标
- 微信小程序:导入阿里巴巴iconfont作为图标
- 项目开发必备:Iconfont-阿里巴巴矢量图标库
- 微信小程序 Button按钮与Icon图标
- Iconfont(阿里巴巴矢量图标库)在Safari下图标不显示的解决方法
- 微信小程序中使用自定义图标(阿里icon)的方法
- 如何在微信小程序中使用iconfont图标 &amp;amp;amp; 小程序模板的调用
- 小程序开发2--各种控件(view,滑动view,简单图标icon,富文本。)
- 微信小程序中写入iconfont图标
- 在webstorm开发微信小程序之使用阿里自定义字体图标
- Iconfont-阿里巴巴矢量图标库的SVG玩法