如何在uniapp项目引入阿里图标库的iconfont(线上)

一是记录备忘, 二是共同学习,欢迎留言

1. 前言:
   uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：
   支持 base64 格式字体图标。
   支持网络路径字体图标。
   小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。
   网络路径必须加协议头 https。
   从 阿里矢量图标库(链接) 上拷贝的代码，默认是没加协议头的。
   从 阿里矢量图标库上下载的字体文件，都是同名字体（字体名都叫 iconfont，安装字体文件时可以看到），在 nvue 内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。
   使用本地路径图标字体需注意：
   为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；
   字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；
   字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
   详情看uniapp官网

2. 步骤

   下载图标文件

   登录阿里矢量图标库 ,创建一个项目

   
   
   

   将所需要的图标添加到购物车

   

   进入购物车将所选图标加入到刚才创建的项目中

   
   

   进入项目查看图标,将图标代码复制下来

进入uniapp小程序项目, 在根目录下创建static目录(有的话就不用创建了),在该目录下创建iconfont.css文件, 将在阿里矢量图标库中复制的图标代码粘贴到这个文件中

我们可以看到第一个是base64格式的,不用管他, 将下面两个网址的url添加上https协议,原因开头讲过

使用图标

将图标文件引入到想使用的页面中

在模板中写出字体图标的容器, 添加类名

在style中使用字体图标,font-family: iconfont;的值要和iconfont.css中的保持一致

在容器中添加图标类名

成功显示出图标