新建图标项目

  • 搜索自己心仪的图标,然后选择添加入库,加到购物车
  • 选择完毕后点击右上角的购物车图标,打开侧栏,选择添加到项目,如果没有项目就新建一个,如下:
  • 可以通过上方顶栏菜单 -> 资源管理 -> 我的项目,找到之前添加的图标项目。(现在的 iconfont 可以在图标库的项目设置里直接打开彩色设置,然后采用 fontclass 的引用方式即可使用多彩图标。但是单一项目彩色图标上限是 40 个图标,酌情采用。)

    引入图标

  • 线上引入方案,我使用的是官方文档中最便捷的 font-class 方案。这一方案偶尔会出现图标加载不出的情况。但是便于随时对图标库进行升级,换一下在线链接即可,适合新手使用。最新版本的 iconfont 支持直接在项目设置中开启彩色图标,从而实现直接用 class 添加多彩色图标。(推荐直接用这个即可)
  • 在 source\css\custom.css 中填写如下内容,引入 Font-class 的线上资源:
1
2
@import "//at.alicdn.com/t/c/font_3785958_78091558z5o.css";

更推荐在在主题配置文件 inject 配置项进行全局引入:

1
2
3
4
head:
- <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3785958_78091558z5o.css" media="defer" onload="this.media='all'">
bottom:
- <script async src="//at.alicdn.com/t/c/font_3785958_78091558z5o.js"></script>
  • 可以通过自己的阿里图标库的 font-class 方案查询复制相应的代码
1
关于: /about/ || iconfont icon-aixin-copy