阿里巴巴的iconfont图标库里面有非常多丰富有趣的图标。本文主要讲AeroCore主题如何使用iconfont图标库里优质好看的图标作为我们网站的导航菜单图标。
大致步骤
- 注册并登录iconfont
- 新建项目
- 添加新图标
- 生成Symbol JS脚本链接
- 引用Symbol JS脚本链接
- 设置菜单图标
正文内容
一、注册并登录 iconfont 账号（过于简单此处忽略N字）
iconfont官网注册链接：点击前往注册
二、新建项目
登录 iconfont 账号 → 资源管理 → 我的项目 → 新建项目
三、添加新图标
进入首页找到自己需要的图标加入购物车，将已选择的图标添加至项目
四、生成Symbol JS脚本链接
添加至项目后会自动跳转至项目页面，点击“查看在线链接”，生成最新的JS脚本链接，复制后进入AeroCore后台引入
五、引用Symbol JS脚本链接
AeroCore 设置 → 插入代码 → Iconfont地址 → 保存设置
六、设置菜单图标
一键替换工具：https://www.xiaoxingchen.com/h5/tbsc.html
AeroCore自定义图标代码格式：
<svg class="icon" aria-hidden="true"><use xlink:href="#图标代码"></use></svg> 导航名称复制自己需要的图标代码，替换掉上方的#图标代码 与 导航名称，就大功告成了。
使用示例：<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shouye"></use></svg> 主页
最终效果
