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=1656925464221') format('woff'),
url('iconfont.ttf?t=1656925464221') format('truetype'),
url('iconfont.svg?t=1656925464221#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"。