FontIcon

大约 4 分钟

此组件用于展示字体图标。

你可以在 Markdown 文件中使用它来添加图标。

示例

主页图标:
一个大绿分享图标:

- 主页图标: <FontIcon icon="home" />

- 一个大绿分享图标: <FontIcon icon="share" color="#3eaf7c" size="32" />

属性

全局设置

你可以通过 componentsOptions.fontIcon.assets 和 componentsOptions.fontIcon.prefix 全局设置图标资源 url 和图标前缀。

设置图标资源

你应该将图标相关资源设置为 componentsOptions.fontIcon.assets。你需要设置一个 url 或者一组 url，它们是格式为 css 和 js 格式的图标资源。

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

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

警告

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

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

设置图标前缀

componentsOptions.fontIcon.prefix 是你要设置的图标前缀，

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

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

浏览图标

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

高级

生成自己的 Iconfont 资源

Iconfont

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

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

使用方式

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

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