Unicode 引用
Unicode 是字体在网页端最原始的应用方式,特点是:
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 默认情况下不支持多色,直接添加多色图标会自动去色。
注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)
Unicode 使用步骤如下:
第一步:拷贝项目下面生成的 @font-face
@font-face {
font-family: 'iconfont';
src:
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1662519723535') format('woff'),
url('iconfont.ttf?t=1662519723535') format('truetype'),
url('iconfont.svg?t=1662519723535#iconfont') format('svg');
}
第二步:定义使用 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"。