一是记录备忘, 二是共同学习,欢迎留言
-
前言:
uni-app 支持使用字体图标,使用方式与普通 web 项目相同,需要注意以下几点:
支持 base64 格式字体图标。
支持网络路径字体图标。
小程序不支持在 css 中使用本地文件,包括本地的背景图和字体文件。需以 base64 方式方可使用。
网络路径必须加协议头 https。
从 阿里矢量图标库(链接) 上拷贝的代码,默认是没加协议头的。
从 阿里矢量图标库上下载的字体文件,都是同名字体(字体名都叫 iconfont,安装字体文件时可以看到),在 nvue 内使用时需要注意,此字体名重复可能会显示不正常,可以使用工具修改。
使用本地路径图标字体需注意:
为方便开发者,在字体文件小于 40kb 时,uni-app 会自动将其转化为 base64 格式;
字体文件大于等于 40kb,仍转换为 base64 方式使用的话可能有性能问题,如开发者必须使用,则需自己将其转换为 base64 格式使用,或将其挪到服务器上,从网络地址引用;
字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
详情看uniapp官网 -
步骤
下载图标文件
登录阿里矢量图标库 ,创建一个项目
将所需要的图标添加到购物车
进入购物车将所选图标加入到刚才创建的项目中
进入项目查看图标,将图标代码复制下来
进入uniapp小程序项目, 在根目录下创建static目录(有的话就不用创建了),在该目录下创建iconfont.css文件, 将在阿里矢量图标库中复制的图标代码粘贴到这个文件中
我们可以看到第一个是base64格式的,不用管他, 将下面两个网址的url添加上https协议,原因开头讲过