Unicode 引用

---

Unicode 是字体在网页端最原始的应用方式，特点是：

• 支持按字体的方式去动态调整图标大小，颜色等等。
• 默认情况下不支持多色，直接添加多色图标会自动去色。

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

Unicode 使用步骤如下：

第一步：拷贝项目下面生成的 @font-face

@font-face {
  font-family: 'iconfont';
  src: 
       url('data:font/ttf;charset=utf-8;base64,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') format('truetype');
}

第二步：定义使用 iconfont 的样式

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

第三步：挑选相应图标并获取字体编码，应用于页面

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

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。