- 推特
- robot
- mastodon
- 功能开关
- Random-outlined
- bilibili-line
- train-subway
- copyright-by
- copyright-nd
- copyright-nc
- copyright-sa
- 洛谷
- tieba
- codingclip
Unicode 引用
Unicode 是字体在网页端最原始的应用方式,特点是:
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 默认情况下不支持多色,直接添加多色图标会自动去色。
注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)
Unicode 使用步骤如下:
第一步:拷贝项目下面生成的 @font-face
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot?t=1722999214988'); /* IE9 */
src: url('iconfont.eot?t=1722999214988#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=1722999214988') format('woff'),
url('iconfont.ttf?t=1722999214988') format('truetype'),
url('iconfont.svg?t=1722999214988#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"。
- 推特.icon-ordchaos-blog-a-Group4027
- robot.icon-ordchaos-blog-robot
- mastodon.icon-ordchaos-blog-mastodon
功能开关 .icon-ordchaos-blog-gongnengkaiguan- Random-outlined.icon-ordchaos-blog-Random-outlined
- bilibili-line.icon-ordchaos-blog-bilibili-line
- train-subway.icon-ordchaos-blog-train-subway
- copyright-by.icon-ordchaos-blog-copyright-by
- copyright-nd.icon-ordchaos-blog-copyright-nd
- copyright-nc.icon-ordchaos-blog-copyright-nc
- copyright-sa.icon-ordchaos-blog-copyright-sa
洛谷 .icon-ordchaos-blog-website-luogu- tieba.icon-ordchaos-blog-website-tieba
- codingclip.icon-ordchaos-blog-website-codingclip
font-class 引用
font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。
与 Unicode 使用方式相比,具有如下特点:
- 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
使用步骤如下:
第一步:引入项目下面生成的 fontclass 代码:
<link rel="stylesheet" href="./iconfont.css">
第二步:挑选相应图标并获取类名,应用于页面:
<span class="iconfont icon-ordchaos-blog-xxx"></span>
" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。
- 推特#icon-ordchaos-blog-a-Group4027
- robot#icon-ordchaos-blog-robot
- mastodon#icon-ordchaos-blog-mastodon
功能开关 #icon-ordchaos-blog-gongnengkaiguan- Random-outlined#icon-ordchaos-blog-Random-outlined
- bilibili-line#icon-ordchaos-blog-bilibili-line
- train-subway#icon-ordchaos-blog-train-subway
- copyright-by#icon-ordchaos-blog-copyright-by
- copyright-nd#icon-ordchaos-blog-copyright-nd
- copyright-nc#icon-ordchaos-blog-copyright-nc
- copyright-sa#icon-ordchaos-blog-copyright-sa
洛谷 #icon-ordchaos-blog-website-luogu- tieba#icon-ordchaos-blog-website-tieba
- codingclip#icon-ordchaos-blog-website-codingclip
Symbol 引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。 - 兼容性较差,支持 IE9+,及现代浏览器。
- 浏览器渲染 SVG 的性能一般,还不如 png。
使用步骤如下:
第一步:引入项目下面生成的 symbol 代码:
<script src="./iconfont.js"></script>
第二步:加入通用 CSS 代码(引入一次就行):
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>