iconfont字体图标的使用_iconfont.eot-优快云博客

本文介绍了iconfont阿里巴巴矢量图标库的使用方法。先打开官网https://www.iconfont.cn/ ，选中心仪图标加入购物车，可直接下载或添加至项目。下载解压后放至项目中，Demo里有Unicode、Font class、Symbol三种引入方式，还说明了Unicode引入的注意事项及使用方法。

首先打开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;
}