跳转至

VS Code 图标输入

预计阅读时长 : 3 分钟

概述

MkDocs 对图标的支持非常完善,常用的 Material Design 和 Font Awesome 图标都可以直接使用,更不用说通用的 Emoji 表情。

但是 VS Code 对图标的支持就比较有限了,尤其是快速搜索和输入是一个挺麻烦的问题。为了能方便输入,需要综合使用多个扩展,并按照相应的操作流程才能实现。

通过使用智能提示作为统一入口,并将 : 作为统一的唤醒前缀使用,可以让三种图标输入方式的操作流程保持一致,大大提高了使用的便捷性。

Emoji

虽然 VS Code 默认支持 Emoji 的 Unicode 显示方式,但使用 :emojisense: ⧉ 扩展会让搜索和搜索变得更加简单,只需要在编辑区中输入 :,就会自动激活智能提示,继续输入 Emoji 的名称,就可以进行自动搜索,选择对应的 Emoji 即可上屏,👍。

除了 Unicode 显示方式外,还可以使用 :emojisense: ⧉ 提供的 Emoji Markup 显示方式。同样,只需要在编辑区中输入 ::,就会自动激活智能提示,继续输入 Emoji 的名称,就可以进行自动搜索,选择对应的 Emoji 即可上屏。

在这种模式下,Emoji 会以 Decorators + Unicode 的格式在文档中呈现。这种格式的好处是可以在 Markdown 编辑器中和后面要介绍的 Material 的图标显示模式保持完全一致,也不会影响在 MkDocs 正常显示为 Unicode 字符。

如果不知道选用什么样的 Emoji,那么可以使用 Cmd+E 或者 Shift+Cmd+E 快捷键,调用 :emojipedia: ⧉ 在控制面板中打开 Emoji 图标库,进行 Emoji 的搜索和选择并进行快捷输入。

Material Design

Material Desgin 的图标基本上是业界的公认标准,配合 Material Design Icons Intellisense ⧉ 扩展可以在 VS Code 中拥有非常好的使用体验。因此,也推荐使用 Material Desgin 作为默认的图标库,而将 Fontawesome 作为补充。

同样,只需要在编辑区中输入 :,然后在智能提示中选择 Material Add 或者 Material Search,即可根据不同的需求进行图标的搜索和输入。

首先介绍 Material Search模式。这种模式适合大概知道要输入的图标的名称,可以通过关键词直接搜索定位并快捷输入。具体的操作流程如下:

  1. 在编辑区中输入 :,然后在智能提示中选择 Material Search
  2. 等待 :material 文本上屏之后,继续输入 -,等待智能提醒弹出图标选择下拉框
  3. 继续输入图标的名称,实时自动搜索匹配的图标,选择对应的图标按 Tab 即可上屏

然后,介绍 Material Add 模式。这种模式适合不知道要输入的图标的名称,可以直接在图标库中查看并选择合适的图标后快捷输入。相对 Search 模式,操作流程会稍显复杂一些:

  1. 在编辑区中输入 :,然后在智能提示中选择 Material Add
  2. 等待 :material- 文本上屏之后,然后在侧边栏中的 EXPLORER: MDI EXPLORER 中确定需要的图标
  3. 点击图标之后的 图标即可完成图标名称输入

Fontawesome

相对 Material Design 图标的丝滑输入体验,Fontawesome 图标的输入体验就显得有些生涩了。但是,Fontawesome 图标库中的图标种类更加丰富,也更加适合用于一些特定的场景,所以作为备用方案还是有其存在的价值。

和 Material Design 图标的输入有些不一样, Fontawesome 的图标输入有三种不同的方式。

首先介绍 Fontawesome Search模式。这种模式需要使用 Font Awesome Auto-complete & Preview ⧉ 这个扩展实现。同样适合大概知道要输入的图标名称的场景,可以通过关键词直接搜索定位并快捷输入。具体的操作流程如下:

  1. 在编辑区中输入 :,然后在智能提示中选择 Fontawesome Search
  2. 等待 :fontawesome 文本上屏之后,继续输入 -,等待智能提醒弹出图标选择下拉框
  3. 继续输入图标的名称,实时自动搜索匹配的图标,选择对应的图标按 Tab 即可上屏

不过,Fontawesome 的图标并不支持 Markup 格式的直接显示,只能将鼠标移到图标文本上才能显示出来,这也导致了体验远不如 Material Design。

然后,介绍一下和 Material Design 图标类似的 Fontawesome Add 模式。这种模式搭配使用了 Font Awesome GalleryMarkdown Paste ⧉ 两个扩展。这种模式同样适合不知道要输入的图标的名称,可以直接在图标库中查看并选择合适的图标后快捷输入。

  1. 打开侧边栏的 FONT AWESOME GALLERY,点击想要的图标,将自动复制图标名称
  2. 回到编辑框中,使用 Option+Cmd+V,调用 Markdown Paste 扩展中提前设置好的正则替换规则,将图标名称转化为标准格式粘贴输入

关于如何在 Markdown Paste 扩展中设置相应的正则替换规则,教程详见 VS Code 正则指引

最后,简要介绍一下 Fontawesome Duotone 模式。这种模式属于个人在 MkDocs 里的一个专属小需求,就是可以使用付费版的 Duotone 图标。

  1. 在侧边栏 Explorer 中打开 MkDocs 项目的 overrides/.icons/fontawesome/duotone 路径
  2. 在路径名上,点击鼠标 Right Button,选择 Open in SVG Gallery,打开 SVG 预览页面
  3. 在 SVG 预览页面中,选择需要的图标,并手动复制图标名称
  4. 通过 : 唤醒 fontawesome duotone 智能提示,使用 Ctrl+V 将图标名称黏贴到定位的变量位置