Icon - 图标

icon 短代码使用 Font Awesome 库显示图标.

语法

{{% icon icon="skull-crossbones" style="blue" %}}
{{% icon style="warning" %}}
{{% icon icon="angle-double-up" color="blue" %}}

{{% icon skull-crossbones blue %}}
{{% icon exclamation-triangle red %}}
{{% icon angle-double-up blue %}}

{{ partial "shortcodes/icon.html" (dict
    "page" .
    "icon" "skull-crossbones"
    "style" "blue"
)}}
{{ partial "shortcodes/icon.html" (dict
    "page" .
    "style" "warning"
)}}
{{ partial "shortcodes/icon.html" (dict
    "page" .
    "icon" "angle-double-up"
    "color" "blue"
)}}

参数

名字	位置	默认值	笔记
icon	1	<empty>	要显示的 Font Awesome 图标名称它将以其相应上下文的文本颜色显示。
style	2	<empty>	用于图标的样式方案。. - 按严重性: `caution`, `important`, `info`, `note`, `tip`, `warning` - 按品牌颜色r: `primary`, `secondary`, `accent` - 按颜色: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red` - 按特殊颜色: `default`, `transparent`, `code` 您还可以定义自己的样式.
color		<empty>	要使用的 CSS 颜色值如果未设置，则所选颜色取决于 style. 任何给定的值都将覆盖默认值。 - 对于严重性样式：严重性的良好匹配颜色 - 对于所有其他样式：相应的颜色

查找图标

浏览 Font Awesome Gallery中的可用图标。请注意， free 过滤器已启用，因为默认情况下只有 free 图标可用。

进入特定图标的 Font Awesome 页面（例如心形页面）后，复制图标名称并粘贴到 Markdown 内容中。

自定义图标

Font Awesome 提供了许多修改图标的方法

更改颜色（默认情况下，图标将继承父颜色）
增大或减小大小
旋转
与其他图标组合

查看有关使用 CSS 的 Web 字体的完整文档以了解更多信息。

例子

标准用法

Built with {{% icon heart %}} by Relearn and Hugo

Built with by Relearn and Hugo

带颜色

- Built with {{% icon heart red %}} by Relearn and Hugo
- Built with {{% icon icon="heart" style="red" %}} by Relearn and Hugo - long form, same as above
- Built with {{% icon icon="heart" color="red" %}} by Relearn and Hugo - this uses the HTML color red instead of the red style

Built with by Relearn and Hugo
Built with by Relearn and Hugo - long form, same as above
Built with by Relearn and Hugo - this uses the HTML color red instead of the red style

高级 HTML 用法

虽然简码简化了标准图标的使用，但 Font Awesome 库的图标自定义和其他高级功能要求您直接使用 HTML。将HTML <i> 粘贴到标记中，Font Awesome 将加载相关图标。

Built with <i class="fas fa-heart"></i> by Relearn and Hugo

Built with by Relearn and Hugo

要在 Markdown 中使用这些原生 HTML 元素，请在hugo.toml 添加下面内容:

[markup.goldmark.renderer]
    unsafe = true