问题描述

直接上图，左图正常显示，右图显示错误：

1 2

相关配置代码

在Butterfly主题的 _config.butterfly.yml 文件中，用于美化页面的标题，相关配置如下：

1
2
3
4
5
6
7
8
9
# Configuration for beautifying the content of the article
beautify:
  enable: true
  # Specify the field to beautify (site or post)
  field: post
  # Specify the icon to be used as a prefix for the title, such as '\f0c1'
  title_prefix_icon: '\f0a4'
  # Specify the color of the title prefix icon, such as '#F47466'
  title_prefix_icon_color: '#F47466'

笔者在最初配置此项美化时，网页能正常渲染 Fontawesome 图标，但过了几个月后突然发现无法正常显示。查阅相关网页，排除了此段配置代码有误、Fontawesome网站访问异常、图标Unicode错误几个问题。

解决方案

在 _config.butterfly.yml 文件中，查找 inject 配置项，添加 Fontawesome 相关的css链接：

1
2
3
4
5
6
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
    - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  bottom:
    # - <script src="xxxx"></script>

添加后，重新生成并部署，问题解决。