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

1、选择图标并加入项目

把选好的图标放如购物车，并加入项目

2、复制font-face

3、建立一个iconfont.css

把代码复制在里面
并加上.iconfont{}控制图标样式（一般为下面内容，按需求修改）

@font-face {
  font-family: 'iconfont';  /* project id 1706938 */
  src: url('//at.alicdn.com/t/font_1706938_7m6luurlbyh.eot');
  src: url('//at.alicdn.com/t/font_1706938_7m6luurlbyh.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1706938_7m6luurlbyh.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1706938_7m6luurlbyh.woff') format('woff'),
  url('//at.alicdn.com/t/font_1706938_7m6luurlbyh.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1706938_7m6luurlbyh.svg#iconfont') format('svg');
}

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

4、引入iconfont.css

引入方式有两种，那种都行

4.1、app.vue里面引入

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

4.2、在main.js引入

  import '../public/fonts/iconfont.css'

5、使用字体图标

有两种方式使用

5.1、HTML 实体字符码

搜索下的xe610;就是html实体字符码
使用方式：

<i class="icon iconfont title_i">&#xe64f;</i>

5.2、font class

在iconfont.css文件里，添加一个（.icon-图标命名：before）我这里是.icon-xinxi:before

.icon-xinxi:before {
  content: "\e600";
}

使用方式：

<i class="iconfont icon-xinxi"></i>