如何在_site.yml中添加自定义图片图标并解决下拉菜单Font Awesome图标失效问题？

一、修复下拉菜单内fa-pepper-hot图标不显示问题 #

• 匹配Font Awesome版本：fa-pepper-hot是Font Awesome 5及以上版本的图标，需在配置中明确指定加载该版本。在html_document节点下添加fontawesome: 5：

  output:
    html_document:
      theme: yeti
      fontawesome: 5
  

• 修正图标语法：Font Awesome 5+的图标需要指定风格前缀，fa-pepper-hot属于solid风格，因此完整写法应为fas fa-pepper-hot：

  - text: Module 1
    icon: fas fa-pepper-hot
    href: readings-module1.html
  

二、自定义image.png图标尺寸匹配Font Awesome #

Font Awesome导航栏图标默认尺寸约为18px，通过以下两步实现自定义图片的尺寸对齐：

1. 配置正确图片路径：确保图片路径为相对路径（如图片放在项目根目录的images文件夹下，路径写images/image.png），替换配置中的DIRECTORY.OF.MY.IMAGE.PNG：

   - text: Readings
     icon: images/image.png
     menu:
       # 菜单内容...
   

2. 添加CSS调整样式：通过内嵌CSS强制自定义图标尺寸与Font Awesome一致，在html_document节点下添加includes配置：

   output:
     html_document:
       theme: yeti
       fontawesome: 5
       includes:
         in_header: |
           <style>
             .navbar-nav .nav-item .nav-link img {
               height: 18px;
               width: auto;
               margin-right: 4px; /* 与Font Awesome图标保持相同右侧间距 */
               vertical-align: middle;
             }
           </style>
   

完整配置示例 #

name: my-website
output_dir: docs
navbar:
  title: My Website
  left:
  - text: Home
    href: index.html
  - text: About
    href: about.html
  - text: Readings
    icon: images/image.png # 替换为你的图片实际路径
    menu:
    - text: Module 1
      icon: fas fa-pepper-hot
      href: readings-module1.html
    - text: Module 2
      href: readings-module2.html
    - text: Module 3
      href: readings-module3.html
    - text: Module 4
      href: readings-module4.html
output:
  html_document:
    theme: yeti
    fontawesome: 5
    includes:
      in_header: |
        <style>
          .navbar-nav .nav-item .nav-link img {
            height: 18px;
            width: auto;
            margin-right: 4px;
            vertical-align: middle;
          }
        </style>

内容的提问来源于stack exchange，提问作者symkly