图标支持

大约 3 分钟

整个主题在多处都添加了 FontClass 格式图标的支持。

目前你可以使用 iconfont 和 fontawesome 为你的项目添加图标。

  • 对于国内用户,推荐使用 iconfont
  • 对于海外用户,推荐使用 fontawesome

设置图标

你可以在多个地方使用图标。

  • 页面: 在 frontmatter 中设置 icon

    此图标将用于路径导航、页面标题、导航栏生成项、侧边栏生成项、页面导航等。

  • 导航栏: 在 NavbarItemConfig 中设置 icon 选项

  • 侧边栏: 在 SidebarItemConfig 中设置 icon 选项

  • 主页: 在功能项中设置 icon 选项

Iconfont

Iconfontopen in new window 是阿里妈妈 MUX 倾力打造的矢量图标管理、交流平台。

设计师将图标上传到 Iconfont 平台,用户可以自定义下载多种格式的 icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

使用方式

首先你需要新建一个项目,对你网站的图标进行设置与管理:

  1. 使用 GitHub 或微博登录 Iconfont。
  2. 在网站上方找到 “资源管理 → 我的项目”,点击右上角的 “新建项目” 图标。
  3. 设置可以辨识的项目名称
  4. FontClass/Symbol 前缀 填入 icon- (你也可以根据自己喜好填写,但需要将此值设置额外前缀 iconfont 并设置到在主题选项中的 iconPrefix)
  5. Font Family 请保持 iconfont

新建项目

导入图标

  1. 请自行在 iconfont 自由搜索寻找你想要使用的图标,并点击图标上的 “添加入库” 按钮

    添加入库

  2. 在寻找完所有图标后,请点击右上角的 “添加入库” 图标,点击下方的 “添加至项目” 并选择你刚刚创建好的项目进行确定。

编辑图标

在项目页面,你可以对项目内的图标进行简单的编辑,包括位置、缩放、旋转、颜色以及 Unicode 编号与 Font Class / Symbol 的调整。

编辑图标

生成图标文件

  1. 请点击项目上方的 “Font Class” 按钮,并点击生成。

    添加入库

  2. 将 css 地址设置到主题选项的 iconAssets 中。

提示

如果你日后添加了新的图标,请重新生成新的 CSS 地址并替换 iconAssets

Fontawesome

本主题内置了 Fontawesome 支持。

导入

你需要在主题选项中设置 iconAssets: "fontawesome"

Font-awesome 当前版本为 V6。

使用

请按照 fontawesome 文档open in new window 正常使用。

Iconfont 精选图标

你可以直接将 iconAssets 设置为 "iconfont" 使用下列 IconFont 精选图标:

Loading...