关于前端:阿里矢量图标的三种使用方式整理

29次阅读

共计 1213 个字符，预计需要花费 4 分钟才能阅读完成。

web 端 iconfont 应用

援用形式：

    1.unicode 援用（不反对多色，反对按字体的形式去动静调整图标大小，色彩）2.font-class 援用（unicode 应用形式的一种变种，语意明确，容易分辨是哪个 icon，实质上还是应用的字体，所以多色图标还是不反对的）3.symbol 援用（全新的应用形式，将来的支流，举荐用法。反对多色图标、反对像字体那样来调整款式）

兼容性 unicode > font-class > symbol

形式一、unicode 援用(下载到本地)

①增加想要的图标到库，右上角购物车将图标退出到想要退出的我的项目中（或者新建的我的项目中）

②下载我的项目中图标至本地，解压下载的压缩包，将下载文件放入到 static 文件夹中（带 demo 字样的是具体配置阐明文件，不必引入）

③援用图标 css 文件

运行会报错文件查找失败：’./iconfont.ttf?t=1642736921417′

是因为在 iconfont.css 外面要应用绝对路径，不能应用相对路径（举例批改如下图，须要依据本人文件所放地位批改为对应格局门路）

④在须要图标的中央应用图标，类名为 iconfont，图标名称也能够通过复制间接拿到
<i class="iconfont"></i>

运行后果如图:
1. 形式二、unicode 援用(在线链接)
  ①复制在线链接
②定义应用 iconfont 的款式并全局援用

③在须要图标的中央应用图标，类名为 iconfont，图标名称也能够通过复制间接拿到
<i class="iconfont"></i>
运行后果如图：
1. 形式三、font-class 援用
  ①拷贝我的项目上面生成的 font-class 代码
②援用图标 css 文件

③应用图标，筛选相应图标并获取类名，利用于页面
1. 形式四、symbol 援用
  uniapp 不反对 symbol 多色图标，须要应用工具 iconfont-tools 进行解决
①以 symbol 形式下载到本地

②装置 iconfont-tools（windows+R，cmd 关上 dos 窗口，装置 iconfont-tools）

执行命令为：npm install -g iconfont-tools

③将下载压缩包解压，取出 iconfont.js 文件，将 iconfont.js 文件放入 iconfont-tools 文件夹下（iconfont-tools 在 node 装置门路下 \node_global\node_modules\ 内，我是将 nodejs 装置在 F 盘下）

④命令提示符执行命令：iconfont-tools，始终回车应用默认设置就好，执行结束后 iconfont-tools 文件夹下会生成 iconfont-weapp 文件夹。