vue中通过Font class方式使用阿里图标库

**

vue中通过Font class方式使用阿里图标库

**
1.去阿里巴巴矢量图标库link，登录，找到自己想要的图标，并添加入库。

2.选好图标后点击箭头所指

3.点击【添加至项目】，注意，在这之前要登陆阿里巴巴矢量图标库

4.没有项目，可以新建一个项目

5.点击【确定】

6.在新建的项目中（我刚才新建的项目的名字是vue），选择Font class方式，点击【下载至本地】

7.选好保存地址后，点击【保存】，我选择保存的地址是桌面

8.解压刚才下载的zip格式的文件，要打开两次，第一次是下图这种的

第二次是这种的，ctrl a全选，ctrl c复制

9.在项目的assets文件夹下新建一个iconfont文件夹，将刚才复制的那些文件粘贴进去。

10.在项目的main.js中引入一句话

import '../src/assets/iconfont/iconfont.css';

11.回到阿里巴巴矢量图标库link，在【资源管理】里点击【我的项目】

12.找到自己刚才建的项目，记住你想要加入的图标的名字，就是我画线的部分，或者用鼠标在底下划一下复制名字。

13.进入你的vue页面，复制箭头所指的这段代码

/*// 阿里字体图标设置*/
.icon, .iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;
}

14.横线部分是每次都要加的，红框部分根据你的需要做改动就可以了，我在这个示例里只添加了一个图标，所以三个li的红框部分都一样。

15.成品图

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！