在 uniapp 中使用 阿里巴巴矢量图标

最近要求，使用一下阿里巴巴矢量图标来替换掉项目中的某些小图片。一方面 矢量图不会失真，另一方面占用空间小了，所以去网上百度了一下，最后实现了效果，在这里分享一下我的使用过程

1.到官网，登录，没有账号的话就注册一个：

iconfont-阿里巴巴矢量图标库

2.搜索自己想要的图标，并加入购物车中

3. 点击右上角 购物车 图标，打开购物车

4.点击下载代码，把下载下来的文件解压出来 

5. 目前我下载的，解压出来以后，文件都是默认存放在 font_i5lcy3krrgo 的文件夹中，推荐把文件夹名改成 font ，然后把整个文件夹复制到 你需要使用的项目中

 

6.这里我把文件放入了 static 文件夹下面，打开里面的 iconfont.css 文件，修改@font-face 中的 所有 url 路径，因为我是放在 static下，所以为

 

7. 在 App.vue 中引入iconfont.css

<style>
	/*每个页面公共css */
	@import url("/static/font/iconfont.css");
</style>

 

8. 在页面中通过 标签的形式使用图标，class 中的类名为 第6步中font-family 后的名字，在文件中打开 demo_index.html ，  为复制图标下的名字

 

<text class="iconfont">&#xe687;</text>
<text class="iconfont">&#xe627;</text>
<text class="iconfont">&#xe65d;</text>
<text class="iconfont">&#xe65d;</text>
<text class="iconfont">&#xe7ad;</text>

查看效果：

 注意事项：

（1）图标的大小通过设置 font-size 来改变

（2）第6步中font-family 后面的名字可以自定义，但是我没弄，感兴趣的可以百度一下

（3）当需要放置Unicode编码的是伪元素的content属性时，需要将该编码的前三位用 “ \ ”替换。否则图标将不会出现，比如将  替换为 \e65d;   在 iconfont.css 中有举例

text::before {
     content: "\e65d;";
  }

 （4）如果是团队项目，Ui把全部图标都上传完毕后，不需要自己搜索下载，找到主页中的 资源管理，选择 我的项目 ， 找到左侧 我参与的项目 选择项目，直接点击下载至本地，剩下的操作就是一样的了

 

学完了才觉得好简单，嗐