1. 使用字体图标的优点:

1.1 减小打包体积,一些平台如微信小程序等在发布时有体积限制,大量使用静态资源会使得打包体积容易超出限制

1.2 字体图标是矢量的,缩放不失真、模糊

1.3 对比引用多个网络图标,字体图标只需一个css文件即可,因此减少了网络请求次数,同时比下载图片节约流量

2. 在HBuilder X中简单导入iconfont图标库

2.1 新建一个空白的uni-app项目

新建一个空白的uni-app项目test iconfont,Vue版本选择VUE2,默认模板。

项目初始结构如下,VUE版本选择为vue2,默认模块

2.2创建iconfont项目仓库

在iconfont官网找到资源管理下拉菜单中我对项目选项,点击进去后选择右边加号新建项目

创建好项目后可以在图标商城搜索选择所需要的图标,然后添加到项目

在我发起的项目选择点击生成代码

点击复制代码下方的连接查看代码

3.在uni-app项目中使用iconfont 图标

3.1在项目根目录下创建common目录,并在目录下创建iconfont.css文件

3.2 将iconfont图标库中生成的代码复制粘贴到iconfont.css文件中,并添加https前缀

url('//at.alicdn.com/t/font_xxx') url('https://at.alicdn.com/t/font_xxx')

如上所示,这里文件内部url的默认路径规则在app端属于文件协议,因此要在app端正常显示,必须自行补齐前面的协议,否则app无法下载样式。

若内容下载的文件超过40kb,则需要base64转码,可搜索相关的工具网站在线转码iconfont文件

base64转码参考:uni-app引入iconfont字体图标 – 菜鸡H – 博客园 (cnblogs.com)

在App.vue的标签中导入iconfont.css文件,将其挂载到全局

@import url("common/iconfont.css");

3.3 在index页面中使用iconfont图标。

首先,我们来到iconfont官网,在我的项目中选择相应的图标点击复制代码

在index视图中添加标签 在class属性中iconfont调用图标

其中 iconfont 代表调用iconfont图标库 中间的icon-caret-down是我们的图标代码 share是自定义样式属性,可以实现自定义字体的大小颜色等功能