阿里云矢量图

阿里云矢量图

子比主题集成阿里云矢量图标库完整指南

最后更新：2025年03月29日 | 适用版本：子比主题7.3+

---

一、阿里云项目配置

1.1 创建图标项目

1. 访问阿里云矢量图标库并登录

2. 搜索图标 → 加入购物车 → 创建新项目时设置：

   FontClass/Symbol前缀：zb-  # 与主题CSS类名兼容
   FontFamily：iconfont       # 强制使用默认值
   

1.2 生成接入代码

# 推荐Symbol模式（支持多色图标）
生成方式：项目管理 → Symbol → 复制JS链接
示例代码：//at.alicdn.com/t/font_123456_abcde.js# 备选FontClass模式（兼容旧版）
生成方式：Font class → 复制CSS链接
示例代码：//at.alicdn.com/t/font_987654_xyz.css

---

二、子比主题集成

2.1 资源引入方式

<!-- 方式一：Symbol模式（底部注入） -->
<!-- 子比主题后台 → 自定义代码 → 底部HTML -->
<script src="//at.alicdn.com/t/font_123456_abcde.js"></script><!-- 方式二：FontClass模式（头部注入） -->
<!-- 子比主题后台 → 自定义代码 → 头部代码 -->
<link rel="stylesheet" href="//at.alicdn.com/t/font_987654_xyz.css">

2.2 菜单图标绑定

1. WordPress后台操作路径：

   外观 → 菜单 → 展开目标菜单项 → CSS类
   

2. 类名填写规则：

   # Symbol模式
   icon-symbol# FontClass模式
   iconfont zb-home
   

---

三、高级配置技巧

3.1 多色图标支持

<!-- 在文章/小工具中使用SVG标签 -->
<svg class="icon" aria-hidden="true"><use xlink:href="#zb-图标代码"></use>
</svg>

需配合Symbol模式JS引用

3.2 本地化部署

1. 下载字体包（含.eot/.ttf/.svg）

2. 上传至服务器路径：

   /wp-content/themes/zibll/assets/fonts/
   

3. 修改CSS文件中的字体路径：

   @font-face {src: url('./fonts/iconfont.eot'); /* 相对路径调整 */
   }
   

---

四、样式优化方案

4.1 基础适配CSS

/* 解决图标错位问题 */
.iconfont {vertical-align: -0.15em !important;font-size: 16px;
}/* Symbol模式尺寸统一 */
.icon-symbol {width: 1em;height: 1em;
}

4.2 动态交互示例

// 实现菜单图标悬停旋转
jQuery($ => {$('.menu-item').hover(() => $(this).find('.iconfont').css('transform', 'rotate(15deg)'),() => $(this).find('.iconfont').css('transform', 'rotate(0)'))
})

---

五、常见问题排查

问题现象	解决方案	相关文档
图标显示为方块	检查JS/CSS链接有效性	[阿里云文档]
多色图标失效	确认使用Symbol模式	[博客教程]
移动端图标模糊	添加-webkit-font-smoothing​	[WPF指南]
点击区域异常	检查父容器padding​值	[主题手册]

更新提示：阿里云图标库更新后需重新生成代码，建议在链接后添加版本号参数（如?v=20250329​）