引入阿里图标库

hexo引入阿里图标库

（记录一下）

1. 首先在https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a 找到想要的图标，然后点击右上角的购物车，生成图标项目（如果想找到自己以前的图标项目，可以在资源管理-我的项目中查找）
2. 选择Symbol，生成在线链接，在[Blogroot]_config.butterfly.yml中的inject配置项中添加：

代码语言：javascript复制

 inject:
      head:
      bottom:
        - <script async src="//at.alicdn.com/t/font_3174164_no8l0gbvn.js"></script>

1. 打开[Blogroot]themesbutterflysourcecsscustom.css（如果没有可以自行创建），添加：

代码语言：javascript复制

svg.icon {
   width: 1em; height: 1em;
   /* width和height定义图标的默认宽度和高度*/
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}

1. 添加外挂标签，在[Blogroot]themesbutterflyscriptstag 目录下新建 iconfont.js，打开并添加：

代码语言：javascript复制

'use strict';

function iconFont(args) {
  args = args.join(' ').split(',')
  let p0 = args[0]
  let p1 = args[1]?args[1]:1
  return `<svg class="icon" style="width:${p1}em; height:${p1}em" aria-hidden="true"><use xlink:href="#${p0}"></use></svg>`;
}

hexo.extend.tag.register('icon',iconFont);

1. 运行hexo clean和hexo g就可以了
   • 语法：{% icon [icon-xxxx],[font-size] %} 其中[icon-xxxx]表示图标font-class，[font-size]表示图标大小，单位为em，默认值为1

hexo css

0 人点赞