CSS——引入阿里字体图标步骤

第一步 下载图标：

在阿里矢量图标库（http://www.iconfont.cn）内搜索需要的图标，选中点击添加入库：

选择完成后，右上角库中点击下载代码：

下载完成后解压文件生成一个文件夹。

将文件夹中iconfont.css文件复制到项目css文件夹中，这4个图标文件复制到项目fonts文件夹中。

第二步 声明：

使用阿里图标需在css中声明，代码如下：

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

注意：以上url路径为我的路径，使用需要自行更改，另外不知为何我这里路径要用双引号才能正确显示图标，单引号不能显示。

定义字体图标样式：

.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;
}

第三步 引入图标：

打开文件夹中文件，复制字体图标unicode码，使用如下代码应用于页面：

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