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">3</span>
"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。