【CSS】阿里iconfont的使用方法（另附font-family引入方法）

在CSS中使用阿里iconfont图标库的图标，首先需要在阿里iconfont官网上选择所需图标并生成项目，获取到的代码通常包括了一个字体文件和一个CSS样式文件。

以下是如何在CSS中使用iconfont图标的步骤：

1. 引入字体文件：

   通过@font-face规则在CSS中引入字体文件。

2. 使用图标：

   使用阿里iconfont提供的类名来应用图标。

以下是具体的CSS代码示例：

/* 引入字体文件 */
@font-face {
  font-family: 'iconfont';
  src: url('path/to/iconfont.eot'); /* IE9 */
  src: url('path/to/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('path/to/iconfont.woff') format('woff'), /* 现代浏览器 */
  url('path/to/iconfont.ttf') format('truetype'), /* Safari, Android, iOS */
  url('path/to/iconfont.svg#iconfont') format('svg'); /* 老版本IOS */
}
 
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
/* 使用图标 */
.icon-example:before {
  content: '\e600'; /* 这里的Unicode编码需要替换为实际图标的编码 */
}

在HTML中使用：

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

注意：

• 确保将path/to/iconfont.woff, .ttf, .eot, .svg等字体文件的路径替换为实际文件的位置。
• 图标的Unicode编码也需要从阿里iconfont生成的CSS文件中获取，并替换到content属性中。