前言

由于我用axure进行原型设计时，没有记住用的是哪个网站的icon了（我收藏了挺多外网内网的icon网站，找了一遍还是没找到），现在编程网页时，发现我好像不能在axure里复制svg代码出来（当时是直接复制svg代码粘贴进入的axure），所以我决定固定使用一个网页的icon，这样好找一点，于是在项目里我根据官网、网络以及自己的实践引入了iconfont。

引入

1.首先来看官方文档：web端官方给出了好几种引入方式，我选择symbol引入，因为官方说这才是未来的主流，我信了。

2.然后是看官方给出的第一步，我没看懂，于是我去网上看别人的教程，发现官方的意思应该是只需要js文件，具体如下：
找到想要的icon加入购物车，然后点击右上的购物车，根据个人选择添加至项目或者下载素材，由于我是引入所以是点添加至项目，点击symbol然后点击下载到本地,将下载好的压缩包解压后打开，需要里面的js文件复制到项目的iconfont文件夹里(想省事的将文件夹里的文件全部复制就行，据说其他的文件是其他引入方法需要的，里面的两个demo名称文件是演示文档，点击demo_index会打开游览器演示页面),由于官方文档意思应该是只需要js文件，所以我只复制了js，然后在main里面引入，官方第一步就完成了。
第二步是全局样式，由于我这个项目之前设置过全局样式（global.css），所以直接加进去就行了。
第三步是复制官方的svg代码放入页面需要icon的地方，再将官方里的#icon-xxx改成自己想要的icon的对应类名（可以在demo_index里查看对应类名）

结果

一些问题

1.如果将文件夹里的文件都复制到了iconfont目录里。
1.1 点开demo.css会发现有两个报错，都是*zoom:1;这个报错，运行的话不影响，网上搜了一下，是因为清除浮动用的老方法。使用 overflow:hidden;zoom:1 来清除浮动。

1.2 demo_index.html里有一个警告，网上找了一下：通常，以供应商前缀（如-webkit-）开头的CSS属性被认为仅在特定浏览器中可用（特定于浏览器）。在这种情况下，参考background-clip CSS属性的文档，似乎新的浏览器不再需要这个前缀，因为实现和标准是官方的。在代码中添加CSS属性的无前缀版本background-clip: text;即可。

2.我使用的Vue3+Ts，虽然ts完全兼容js，但一堆ts文件里有js文件显得不是很统一。
3.如果我需要某个icon，iconfont很难找到统一风格的，如果在统一风格里找，有可能不全。iconpark里的风格就是统一的，而且大概率是能找到的。…说个抽象的，我找到我原型设计时用的哪个网页的icon了：yesicon。我觉得在icon数量上yesicon赢了。