Unicode 引用
Unicode 是字体在网页端最原始的应用方式,特点是:
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 默认情况下不支持多色,直接添加多色图标会自动去色。
注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)
Unicode 使用步骤如下:
第一步:拷贝项目下面生成的 @font-face
@font-face {
font-family: 'myicon';
src:
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.ttf?t=1738819191763') format('truetype');
}
第二步:定义使用 iconfont 的样式
.myicon {
font-family: "myicon" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
第三步:挑选相应图标并获取字体编码,应用于页面
<span class="myicon">3</span>
"myicon" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。