阿里巴巴矢量库的使用

1.登录http://www.iconfont.cn 可以用github帐号登录

2.点击导航栏上的图标库

3.选择自己需要的图标,加入购物车

4.点击右上角购物车

5.点击添加至项目,没有项目要新建一个

6.在新打开的页面,点击Font class和查看在线链接

下面就是如何在项目中使用.本例以vue-cli搭建的项目为例

1.首先在index.html页面引入我们添加的图标样式

http: 后面的部分就是在线链接显示的url

2.具体使用

之前的界面

现在来添加图标,比如我们要使用支付宝钱包的图标

点击复制代码,然后在页面中使用,比如在<H1>的下面使用

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <i class="iconfont icon-rectangle390"></i>
    <h2>Essential Links</h2>

其中红色部分是固定写法,后面就是你需要的图标样式

稍微修改下样式,改变颜色,增加字体大小

最后效果图

简单的使用到此就OK了