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