Vue中如何引入第三方icon库(阿里巴巴矢量图标库)

1、进入阿里巴巴矢量图标库

Vue中如何引入第三方icon库(阿里巴巴矢量图标库)

2、新建项目

Vue中如何引入第三方icon库(阿里巴巴矢量图标库)

3、前缀注意不要跟element-ui自带的icon(el-icon)重名就ok

Vue中如何引入第三方icon库(阿里巴巴矢量图标库)

4、创建完成后,去阿里选自己要使用的图标,加入购物车

Vue中如何引入第三方icon库(阿里巴巴矢量图标库)                                                                                                                                                                                                                           Vue中如何引入第三方icon库(阿里巴巴矢量图标库)

5、找到自己创建的项目,选中Font class ,点击下载至本地。

Vue中如何引入第三方icon库(阿里巴巴矢量图标库)

6、解压文件后,打开iconfont.css

Vue中如何引入第三方icon库(阿里巴巴矢量图标库)

7、在.iconfont {} 后加入以下代码,(注意 1 2数据要保持一致!)

// 添加的新的样式
[class^="el-icon-third"],
[class*=" el-icon-third"]/*这里有空格*/ {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

Vue中如何引入第三方icon库(阿里巴巴矢量图标库)

8、设置好后,打开你的vue项目,在src/assets下创建文件夹icon,将刚才下载的所有的文件复制了过去。

Vue中如何引入第三方icon库(阿里巴巴矢量图标库)

9、现在就可以在项目中引入图标了。图标名称前必须添加上整个图标的名称,然后再添加图标名字作为类名。

<i class="iconfont icontuding"></i> 也就是 <i class="类名 图标名"></i>

Vue中如何引入第三方icon库(阿里巴巴矢量图标库)

上一篇:[转]Web Api系列教程第2季(OData篇)(二)——使用Web Api创建只读的OData服务


下一篇:在Vue将第三方JS库封装为组件使用