在Hugo中使用Font Awesome图标

如果你的网站只需要一两个图标，你可以直接嵌入你需要的图标并跳过网络。下面是方法。

图标现在对网站来说是必不可少的。根据Font Awesome的说法，它的图标被用于1亿个网站。使用图标的传统方法可能涉及加载网络字体、精灵或脚本。如果你在导航中只需要一个或两个图标，那是一个很大的工作量。有了Hugo，我们可以预先加载SVG图标，并通过部分模板或简码将它们注入我们的页面，跳过网络。这个例子将使用Font Awesome，但这个技术也适用于许多其他图标系统。

传统方式

有几个选择，但目前传统的添加Font Awesome图标的方法是将其添加到你的页面页脚（或页眉）。对于Hugo，这将进入你的页眉或页脚部分模板：

<script defer src="/static/fontawesome/fontawesome-all.js"></script>

并使用类似的东西来引用该图标：

<i class="fab fa-github"></i>

这当然很简单，并提供了全部的图标（和一些额外的功能）然而：

这迫使你的网站对网络产生依赖
因为它是一个脚本和延迟，有一个成本和一个（小的）处理延迟。
可能或不可能触发重绘/回流事件

如果你是一个性能狂人，这对于在导航栏中使用的300字节的GitHub图标来说，是一个很高的成本。

嵌入方式

Font Awesome和其他许多图标代工厂现在都提供SVG版本的图标。有了这个，我们可以直接嵌入需要的图标，而不需要任何脚本或网络调用。它的最终形式，我们将制作一个部分模板，并将其称为：

{{ partial "fontawesome.html" "github" }}

或者更简单的在内容中使用一个短码：

{{% fontawesome github %}}

两者都不使用网络调用。下面是如何做到这一点。

创建一个图标目录

我们需要一个地方来放置我们的SVG图标。在你的hugo项目的顶层创建一个fontawesome 目录。也就是说，它应该与你的content 目录平行。这个目录将不会被发布到你的网站上。

下载你想要的图标

SVG图标托管在FontAwesome/Font-Awesomerepo的advanced-options/raw-svg目录中。在这里找到你想要的图标。例如，这里是GitHub图标。点击raw按钮，你会看到原始SVG版本。把这个保存到你的fontawesome 目录中。

因为我讨厌手动操作，所以我做了一个脚本来做这个。根据你的环境和需要进行调整：

#!/bin/sh
set -ex
icons="twitter github"

dest=fontawesome
url=https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/advanced-options/raw-svg/brands

mkdir -p "${dest}"
for icon in $icons; do
  icon="${icon}.svg"
  wget -O "${dest}/${icon}" "${url}/${icon}"
done

制作一个部分模板

在你的layout/partials 目录下创建一个fontawesome.html文件用：

<span class="inline-svg" >
{{ readFile ( print "fontawesome/" . ".svg" ) | safeHTML  }}
</span>

这对纯文本有效，但如果它与改变颜色的悬停和焦点事件一起使用就有问题。为了解决这个问题，fill=currentColor ，需要在SVG<path> 元素中添加。一个功能更全面的模板版本可能是：

<span class="inline-svg" >
{{- $fname:=print "fontawesome/" . ".svg" -}}
{{- $path:="<path" -}}
{{- $fill:="<path fill=\"currentColor\"" -}}
{{ replace (readFile $fname) $path $fill | safeHTML }}
</span>

样式

你需要添加一些样式，否则图标将完全无法呈现。这时就会出现一些小问题。你必须调整大小，以确保它与你的文本相适应。这对我来说是有效的，但你可能需要调整高度、宽度和顶部（将图标往下推一点以配合文本线）。Elliot Dalh在《将SVG图标与文本对齐和与字体图标说再见》中写了更多细节。

.inline-svg {
  display: inline-block;
  height: 1.15rem;
  width: 1.15rem;
  top: 0.15rem;
  position: relative;
}

在布局中使用它

正如介绍中所宣传的，你可以在你的布局或其他参数中使用该图标:

{{ partial "fontawesome.html" "github" }}

短代码

如果你想让你的内容使用图标，那么你需要使用一个短代码。这几乎是一样的:

<span class="inline-svg" >
{{- $fname:=print "fontawesome/" ( .Get 0 ) ".svg" -}}
{{- $path:="<path" -}}
{{- $fill:="<path fill=\"currentColor\"" -}}
{{ replace (readFile $fname) $path $fill | safeHTML }}
</span>

将此 fontawesome.html ，并使用它作为layouts/shortcodes:

{{% fontawesome github %}}

结语

人们可以根据需要添加尽可能多的图标，但所有的图标只有部分或短码。虽然Font Awesome的javascript库和CDN提供了额外的功能，但如果你只需要一两个图标，就很难比使用Hugo的短码或部分模板更好。

在Hugo中使用Font Awesome图标的方法（附代码）