除了内置图标外,您可以在内容中的任何宏替换的地方使用图标宏添加图标。本页面涵盖了图标宏的结构,目标如何被解析,以及它支持的功能(取决于图标模式)。
解剖学
图标宏是一种内联宏。与其他内联宏一样,它的语法遵循熟悉的模式,即宏名称和目标之间用冒号分隔,然后是用方括号括起来的属性列表。
图标:<目标>[<属性列表>]
<target>` 是图标的名称或路径。<attrlist>
指定各种命名属性来配置图标的显示方式。
例如:
icon:heart[2x,role=red]
例子
这是一个示例,展示了如何在一系列标签名称前插入一个名为_tags_的图标。
icon:tags[] ruby, asciidoctor
当`icons`属性未设置或为空时,这是HTML转换器转换图标宏的方式。
<div class="paragraph">
<p><span class="image"><img src="./images/icons/tags.png" alt="tags"></span> ruby, asciidoctor</p>
</div>
这是DocBook转换器如何转换图标宏的方式。
<inlinemediaobject>
<imageobject>
<imagedata fileref="./images/icons/tags.png"/>
</imageobject>
<textobject><phrase>tags</phrase></textobject>
</inlinemediaobject> ruby, asciidoctor
当图标的图像在图标目录中找不到时,AsciiDoc处理器会显示图标宏的alt(即备用)文本。
如何解析图标
图标宏的目标是一个图标名称(或路径)。如何解析该目标取决于分配给icons attribute的图标模式。
- 文本
-
图标名称将被包含在方括号中(例如,
[heart]
)。 - 图像
-
图标名称将被解析为`iconsdir`中指定`icontype`文件扩展名的文件(例如,./images/icons/heart.png)。
- 字体
-
图标名称将被解析为图标字体中的一个字形(通过CSS类映射)(例如,
fa fa-heart
)。
Warning
|
如果在图像目标中包括文件扩展名,在使用字体图标模式(即`icons=font`)时,图标宏将无法正确工作。 |
图标宏属性(共享的)
图标宏的以下属性在所有图标模式下是共享的。
- 角色
-
应用于包围图标的元素的角色。
- 标题
-
当鼠标悬停在图片上时显示的标题。
- 链接
-
用于图标的URI目标,它将用链接包裹转换后的图标。
- window
-
链接的目标窗口(当指定了`link`属性时)。
角色
这是一个图标的例子,它使用角色来指定颜色。
icon:tags[role=blue] ruby, asciidoctor
链接和窗口
以下是一个带有链接的图标示例,该链接的目标是打开一个新窗口:
icon:download[link=https://rubygems.org/downloads/whizbang-1.0.0.gem, window=_blank]
图标宏属性(仅限图像模式)
下面列出的属性仅在使用图像图标模式时适用。
- alt
-
<img>` 元素的替代文本(HTML输出)或
<inlinemediaobject>
元素的文本(DocBook输出) - 宽度
-
应用于图像的宽度。
例如,以下是在使用图像图标模式时如何控制图标的替代文本和宽度:
icon:tags[Tags,width=16] ruby, asciidoctor
图标宏不支持更改其物理位置的任何选项(如对齐方式)。
图标宏属性(仅限字体模式)
图标宏有一些属性可以修改基于字体的图标的大小和方向。这些属性仅在字体图标模式下被识别。
- 尺寸
-
第一个位置属性;缩放图标;可选值:
1x
(默认)、2x
、3x
、4x
、5x
、lg
、`fw - 旋转
-
旋转图标;值:
90
、180
、`270 - 翻转
-
翻转图标;可选值:
水平
,`垂直
尺寸
要将图标大小设置为默认值的两倍,请在方括号内输入`2x`。
icon:heart[2x]
或者
icon:heart[size=2x]
Tip
|
如果你想要排列图标,以便将它们用作列表中的项目符号,请按照以下方式使用`fw`大小: [%hardbreaks] icon:bolt[fw] bolt icon:heart[fw] heart |
旋转和翻转
要旋转和翻转一个图标,请使用命名属性来指定这些选项:
icon:shield[rotate=90, flip=vertical]