iconfont字体图标的使用

首先打开iconfont阿里巴巴矢量图标库：https://www.iconfont.cn/

找到自己心仪的字体图标加入购物车

可以直接下载或者添加至项目。

下载完解压缩，把解压缩后的文件放到你的项目中：

打开Demo里面有三种引入方式：Unicode、Font class、Symbol
具体区别Demo里面都有详细说明。

Unicode引入
下面是Demo里的。

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}

注意url路径
这是我在自己使用时的路径

	@font-face {
	  font-family: 'iconfont';
	  src: url('fonts/iconfont.eot');
	  src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),
      url('fonts/iconfont.woff2') format('woff2'),
      url('fonts/iconfont.woff') format('woff'),
      url('fonts/iconfont.ttf') format('truetype'),
      url('fonts/iconfont.svg#iconfont') format('svg');
	}

然后就是使用iconfont样式了

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

最后获取相应图标字体编码，应用于页面。

<i class="iconfont">&#x344b;</i>

在使用方式：

在里面创建一个项目将购物车里的图标添加值项目。