教程:
1.打开阿里icon,注册 >登录>图标管理>我的项目
![](https://upload-images.jianshu.io/upload_images/3713575-c2810c61730b11e0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
新建项目
![](http://upload-images.jianshu.io/upload_images/3713575-39e5e49def08f49d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
新建项目
项目名称随便写。前缀注意,不要跟element-ui自带的icon(前缀为:el-icon)重名了。
设置完,点新建
![](http://upload-images.jianshu.io/upload_images/3713575-7d491d69a9f700e0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
注意前缀。设置完,点新建
现在我们返回阿里icon首页,点进去你想要的icon库,因为没有批量导入购物车,所以一般情况下需要一个一个去点,太浪费时间,那么请在控制台输入以下代码,批量导入
var icons = document.querySelectorAll('.icon-gouwuche1'); var auto_click = function(i) { if (i < icons.length) { setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 600); } }; auto_click(0);
![](https://upload-images.jianshu.io/upload_images/3713575-c8fe20ac6c4c4033.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
然后点击回车,他会把这套图库所有icon加入购物车
点页面上的购物车
![](https://upload-images.jianshu.io/upload_images/3713575-abfb1b55fa0bfab8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/178/format/webp)
页面右边的购物车图标,点击
把图标都添加到刚才创建的项目里
![](https://upload-images.jianshu.io/upload_images/3713575-435e363e377db5bc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/582/format/webp)
生成icon的在线css链接
![](https://upload-images.jianshu.io/upload_images/4422141-ea32321141c6035e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/748/format/webp)
生成在线css链接
4. 在Vue项目中,引用在线css链接和新建css样式文件 (重点)
4.1 在Vue项目中创建iconfont.css文件,当然名字自定义。
[class^="el-icon-ali"], [class*="el-icon-ali"] { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
这里的 el-icon-ali 是我自己起的icon前缀名。
4.2 引用阿里项目在线的css链接
<link rel="stylesheet" href="//at.alicdn.com/t/font_937408_7hvsv5fqxr.css"/>
我是在index.html里面引用的。放在前面
4.3 在main.js中添加引用自己创建的css文件
import '@/assets/iconfont.css' // global css
4.4 可以在项目中使用你的icon啦~~~~
<el-button type="primary" icon="el-icon-ali-youhui">搜索</el-button>