图标支持

Mr.Hope ... 2021-2-26 Interface
  • Icon
  • Interface
大约 2 分钟

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

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

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

# Iconfont

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

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

# 使用方式

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

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

新建项目

# 导入图标

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

    添加入库

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

# 编辑图标

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

编辑图标

# 生成图标文件

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

    添加入库

  2. .vuepress/stylesindex.styl 中导入链接。例如:

    @import "//at.alicdn.com/t/font_2410206_a0xb9hku9iu.css";
    
    1

提示

如果你日后添加了新的图标,请重新生成新的 CSS 地址并在 .vuepress/styles/index.styl 中覆盖旧的 CSS 地址。

# Fontawesome

本主题内置了 Fontawesome 支持。

# 导入

.vuepress/stylesindex.styl 中添加:

@import "~vuepress-shared/styles/font-awesome";
1

Font-awesome 当前版本为 5.15.3

并将 themeConfig.iconPrefix 设置为 'fas fa-'

# 使用

请按照 fontawesome 文档 (opens new window) 正常使用。

# 其他说明

  • 图标会默认添加 iconfont 类名
  • 图标 class 的前缀默认为 icon-,可以在主题配置中的 iconPrefix 字段进行更改

# 精选图标

@import '//at.alicdn.com/t/font_2410206_a0xb9hku9iu.css';
1
上次编辑于: 2022年6月4日 13:16
贡献者: Mr.Hope , Mr.Hope