使用本地 Font Awesome

启用基于字体的图标时,HTML 转换器会配置 HTML 文档,使其从 CDN 获取 Font Awesome 资源(CSS 和字体)。这种默认行为可以方便那些希望获得基于字体的图标视觉增强而无需执行额外步骤的用户。直接链接到 CDN(尤其是组织外部的 CDN)存在合理的顾虑。Asciidoctor 提供了一种指向 Font Awesome 本地副本的方法。

在本指南中,我们将假设您已在文档中启用了基于字体的图标(即,将文档中的 icons 属性设置为 font 值)。

准备 Font Awesome 资源

您首先需要做的是下载一份 Font Awesome 的副本。HTML 转换器目前集成了 Font Awesome 4,因此请确保您使用的是该版本。

解压 zip 文件,并将 Font Awesome 资源安排到输出文件(即 Asciidoctor 生成的 HTML 文件)的位置,如下所示:

css/font-awesome.css
fonts/fontawesome-webfont.eot
fonts/fontawesome-webfont.svg
fonts/fontawesome-webfont.ttf
fonts/fontawesome-webfont.woff
fonts/fontawesome-webfont.woff2

重要的是,这些文件必须位于输出文件的同一目录下。如果它与 AsciiDoc 文件所在的目录相同,那么您就准备好了。

切换到您的本地 Font Awesome 资源

现在您已经本地设置了 Font Awesome,您需要指示 Asciidoctor 使用它而不是 CDN 上的。控制此行为的关键属性是 iconfont-remote。默认情况下,此属性已设置。如果您取消设置此属性(例如,-a iconfont-remote!),Asciidoctor 将在 stylesdir 中查找 Font Awesome 样式表。我们假设您将 stylesdir 属性设置为 css 值。如果您有自定义样式表,它也应该位于该文件夹中。

以下是配置了这些属性后的调用方式:

$ asciidoctor -a stylesdir=css -a iconfont-remote! doc.adoc

这将配置 HTML 以如下方式引用 Font Awesome:

<link rel="stylesheet" href="css/font-awesome.css">
Font Awesome 样式表假定字体位于样式表所在目录相邻的名为 fonts 的目录中(即 ../fonts)。因此,如果您不设置 stylesdir 属性,并将 font-awesome.css 移动到包含输出文件的目录中,Font Awesome 样式表将在错误的位置查找字体,图标将无法工作。要解决此问题,您可以编辑 font-awesome.css 并调整字体的路径(例如,将前缀从 ../fonts 更改为 fonts)。

如果您将 Font Awesome 样式表的名称更改为 font-awesome.css 以外的其他名称,您可以通过设置 iconfont-name 属性来告诉 HTML 转换器使用哪个基本名称。假设您已按如下方式设置了 Font Awesome 资源:

css/fa.css
fonts/fontawesome-webfont.eot
fonts/fontawesome-webfont.svg
fonts/fontawesome-webfont.ttf
fonts/fontawesome-webfont.woff
fonts/fontawesome-webfont.woff2

然后,您可以使用以下调用传递样式表的修改后的基本名称:

$ asciidoctor -a stylesdir=css -a iconfont-remote! -a iconfont-name=fa doc.adoc

如果您想更改字体目录的名称,或者想配置 Font Awesome 样式表仅尝试加载其中一种字体,您需要直接修改样式表。

您可以使用相同的属性来集成不同的图标字体库,但它必须与 Font Awesome 的工作方式相同。