Iconfont的使用方法

Iconfont 是阿里提供的 Web 图标字体库，有两种使用方式：

1. 在线链接的方式。
2. 下载到本地的方式。

（本教程跳过注册 iconfont 账号，搜索图标加入项目，新建项目等步骤。）

在线链接就是在 iconfont 项目中，点击阿里官方的“生成链接”，然后生成了一个 CSS 文件链接，通过 link 标签引入页面中：

<!--写在 head 区域-->
 <link rel="stylesheet" href="https://at.alicdn.com/t/font_1651995_2t26t49q3uo.css">

然后在网页中，可以使用 <i> 标签+ 类名来展示图标：

<!--写在 body 区域-->
<i class="iconfont icon-arrowswap"></i>

而本地使用方式，就是通过项目的“下载至本地”，解压下载结果后，放入到前端工程文件中，最后通过本地引入样式表的方式使用。

unicode 引用

unicode 引用图标有以下特点：

• 兼容性最好，支持 ie6+和所有现代浏览器。
• 支持通过字体修改，去动态调整图标大小、颜色等。
• 但因为字体，所以不支持多色。

（1） 在线引用，使用项目中生成的链接，修改 url 路径为 "https://..."

/*写在 style 或 css表里*/
@font-face {
  font-family: 'iconfont';  /* Project id 4040147 */
  src: url('https://at.alicdn.com/t/c/font_4040147_locjc1l3rx.woff2?t=1682501701331') format('woff2'),
       url('https://at.alicdn.com/t/c/font_4040147_locjc1l3rx.woff?t=1682501701331') format('woff'),
       url('https://at.alicdn.com/t/c/font_4040147_locjc1l3rx.ttf?t=1682501701331') format('truetype');
}

然后使用 <i> 标签+ 类名来展示图标：

<!--写在 body 区域-->
<i class="iconfont">&#xe664;</i>

“&#xe664”是图标的 unicode 码，想要什么图标，就使用对应图标的 unicode 码。

（2）本地引用，需要在项目中，点击“下载到本地”。放入前端工程文件后，使用 link 标签引入样式表：

<!--注意相对路径-->
<link rel="stylesheet" href="fonts/iconfont.css">

然后在页面中使用 <i> 标签+类名显示图标：

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

看到这里，你会发现：其实在线和本地的唯一区别，在于样式表是否存在本地项目。

font-class 引用

font-class 有引用图标有以下特点：

• 兼容性好，支持 ie8+和所有现代浏览器。
• 语意明确，书写更直观、容易识别这个 icon 是什么。
• 容易维护，因为用 class 来定义图标，所以要替换时，只需要修改 class 里面的“unicode”引用。
• 不支持多色图标。

（1） 在线引用，使用项目中生成的链接，修改 url 路径为 "https://..."

<!--写在 head 区域-->
<link rel="stylesheet" href="https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.css"

挑选相应图标并获取类名，应用于页面：

<!--写在 body 区域-->
<i class="iconfont icon-xxx"></i>

（2）本地引用，和 unicode 本地引入完全一样，唯一区别在于页面使用方式。

<!--类名要写 iconfont + icon名称-->
<i class="iconfont icon-xxx"></i>