第一步

搜索阿里矢量,点击出现的阿里巴巴矢量图标库

阿里巴巴iconfont使用方法(超级详细)-风君雪科技博客

第二步

进入到阿里巴巴图标库之后,要登陆,我使用的是github的帐号登陆的,没有帐号就自己注册一下下啦

登录之后,搜索自己需要的图标

阿里巴巴iconfont使用方法(超级详细)-风君雪科技博客

然后会出现很多相关的图标,找到自己需要的,鼠标悬浮在上面,会有购物车图标,点击加入购物车

阿里巴巴iconfont使用方法(超级详细)-风君雪科技博客

加入购物车之后点击右上角的购物车,右侧会出现购物车清单

阿里巴巴iconfont使用方法(超级详细)-风君雪科技博客

把需要的图标添加至项目,项目取个名字,方便自己用

阿里巴巴iconfont使用方法(超级详细)-风君雪科技博客

确定之后会出现这些

阿里巴巴iconfont使用方法(超级详细)-风君雪科技博客

点击查看在线链接,点击生成

阿里巴巴iconfont使用方法(超级详细)-风君雪科技博客

生成之后有一串代码,

阿里巴巴iconfont使用方法(超级详细)-风君雪科技博客

把代码复制到你的css文件中

还要在css文件中添加iconfont的样式

.iconfont{
          font-family:”iconfont” !important;
          font-size:16px;font-style:normal;
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke- 0.2px;
          -moz-osx-font-smoothing: grayscale;
        }

 

然后在html需要插入图标的地方写

<i class=“iconfont”></i>

iconfont类名必须要添加,可以在后面再加上你自己的类名以控制样式

其中是图标下面的代码,相信你也看到了,鼠标悬浮在图标上点击复制代码,就可以了