图标支持

大约 5 分钟

整个主题在多处都添加了字体类名与图片格式图标的支持。

目前你可以使用 iconfont、iconify 和 fontawesome 为你的项目添加图标，可以设置自己的图标资源。同时，png/svg 格式的图标也是支持的。你可以使用完整 URL 或路径名来添加图标。

我们推荐使用 iconify 或 fontawesome。

浏览图标列表

Iconify: https://icon-sets.iconify.design/
Iconfont: https://www.iconfont.cn/
Fontawesome: https://fontawesome.com/search?o=r&m=free

设置图标

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

页面: 在 frontmatter 中设置 icon
此图标将用于路径导航、页面标题、导航栏生成项、侧边栏生成项、页面导航等。
导航栏: 在 NavbarItemConfig 中设置 icon 选项
侧边栏: 在 SidebarItemConfig 中设置 icon 选项
主页: 在功能项中设置 icon 选项

在 Markdown 中添加图标

你可以使用 <HopeIcon /> 组件在 markdown 中添加图标。

icon 属性接受与其他 icon 选项相同的内容，即：字体类名和图像 url
color 属性接受一个 css 颜色值，它将用作图标颜色（可选）
size 属性接受一个 css 大小值，该值将用作图标大小（可选）

案例

- <HopeIcon icon="home" color="red" />
- <HopeIcon icon="//theme-hope-assets.vuejs.press/logo.svg" size="4rem" />

全局设置

你可以通过 iconAssets 和 iconPrefix 全局设置图标资源 url 和图标前缀。

设置图标资源

你应该将图标相关资源设置为 iconAssets，你可以在其中设置：

图标资源关键词
css 和 js 格式的图标资源
以上项目的数组

import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    // 关键词: "iconify", "fontawesome", "fontawesome-with-brands"
    iconAssets: "fontawesome",

    // 你想要的 URL
    iconAssets: "/base/my/font-icon/resource.js",

    // 上述内容的数组
    iconAssets: [
      "/base/my/font-icon/resource.js",
      "https://example/my/fonr-icon/resouce.css",
      "fontawesome",
    ],
  }),
};

例如，你可以使用 iconfont.cn 和 fontawesome 来生成你自己的资源

为了便于上手，我们添加了内置关键字 "iconify"、"fontawesome" 和 "fontawesome-with-brand 支持。

警告

如果你将此插件用于商业项目文档，则不推荐使用 iconfont，因为 iconfont 本身是设计人员和开发人员的学习/共享平台。

每个图标都是用户上传的，你必须获得作者的授权才能用于商业用途。上传者也有可能违背用户协议，上传版权在第三方的非原创图标。

通常，你的图标类应该有一个通用前缀，对于 iconfont，图标类名为iconfont icon-<ICON-NAME>，对于 fontawesome free，图标类名为 fas fa-<icon-name>。因此，当你使用关键字或从 iconfont 网站、fontawesome kit 或 fontawesome CDN 生成的单个链接设置上述 asset 选项时，插件会识别它们并自动为你设置前缀为 iconfont icon- 和 fas fa-.

在你使用自己的 url 或设置多个 url 的其他情况下，你可以自己手动设置此选项。毕竟输入 icon: apple 总是比 icon: iconfont icon-apple、icon: mdi:apple 或 icon: fa-solid fa-apple 更好。

高级

使用 Fontawesome Kit

你可以在 fontawesome.com 购买使用套件。

具有专业功能的 Fontawesome 工具包支持专业图标、更多图标样式和上传你自己的图标。

注

详情请关注 fontawesome 文档。

生成自己的 Iconfont 资源

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

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

使用方式

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

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