当启用基于字体的图标时,HTML转换器会配置HTML文档,从CDN检索Font Awesome资产(CSS和字体)。这种默认行为为希望在无需额外步骤的情况下增强字体图标视觉效果的用户提供了便利。直接链接到CDN,特别是链接到组织之外的CDN,确实存在合理的担忧。Asciidoctor提供了一种方法,指向Font Awesome的本地副本。
在本指南中,我们将假设你已经在文档中启用了基于字体的图标(即,将文档中的`icons`属性设置为`font`值)。
准备 Font Awesome 资源
首先,你需要做的是下载一个副本,地址是 https://fontawesome.com/v4/get-started/ [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">
Warning
|
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 样式表以只尝试加载其中一种字体,那么您将需要直接修改样式表。
Tip
|
你可以使用这些相同的属性来集成不同的图标字体库,不过它必须像Font Awesome那样运作。 |