• 0
  • 0

uniapp使用外部图标

2019-09-29 19 0 admin 所属分类:Hbuilder

为什么要使用图标而非图片

首先图片一般比较占空间。如果存放在本地打包可能会导致无法上传到部分平台(微信小程序总大小限制1M以下),其次如果频繁从服务器读取会导致卡顿。更重要的是为了保持在不同分辨率下的手机能够看清图片,还要准备一些列大小的图片。使用图标则可以随意调整大小而不失真。

如何使用外部图标

以 Iconfont为例。登录系统后将目标图标加入到项目。将项目文件打包到本地。



将资源转换

调用该工具 https://transfonter.org/ 将TTF文件以base64的方式转换,将资源下载后打开 stylesheet.css 文件 ,将原来的CSS样式复制到该文件底部 从.iconfront 样式开始

在Uniapp APP.vue中引入样式

@import "colorui/iconfont.css";

使用图标

<text class="iconfont icon-express"></text>


 

返回顶部