vue实战之引入阿里图标（unicode引用）

vue实战之引入阿里图标（unicode引用）

参考官方链接：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.16&helptype=code

第一步

选择需要的图标加入购物车并且在购物车中添加至新创建的项目（随意创一个就行）

第二步

点击unicode，复制生成的代码

第三步

在vue项目的css文件夹中新建一个iconfont.css文件（注意，这个文件的名字在图标被调用时是一个伪类）

把代码复制在里面，并加上.iconfont{}控制图标样式（一般为下面内容，按需求修改），随后再添加一个（.icon-图标命名：before）我这里是.icon-check：before

整页代码如下：

@font-face {
    font-family: 'iconfont';  /* project id 1348317 */
    src: url('//at.alicdn.com/t/font_1348317_3rg8p13jpct.eot');
    src: url('//at.alicdn.com/t/font_1348317_3rg8p13jpct.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1348317_3rg8p13jpct.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1348317_3rg8p13jpct.woff') format('woff'),
    url('//at.alicdn.com/t/font_1348317_3rg8p13jpct.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1348317_3rg8p13jpct.svg#iconfont') format('svg');
}
.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;
}

.icon-check:before{
    content: '\e611'
}

第四步

在app.vue的style中引入

  @import "assets/css/iconfont.css";

第五步

在需要的页面引入图标即可

      
      记住登录状态

效果图

ding-left: 10px;color: #8894A4 ">记住登录状态

```

效果图