社交菜单图标问题：添加类后丢失超链接，需替换Goodreads图标

• 步骤1：关闭主题自带的Ion Icons
  打开子主题的functions.php文件，找到带ionicons的代码行（比如wp_enqueue_style('ionicons', ...)），直接删除或者在代码前加//注释掉。如果找不到相关代码，就在子主题的style.css末尾添加这段CSS覆盖原有样式：

  .social-icons ul a:after {
    font-family: unset !important;
    content: unset !important;
  }
  

• 步骤2：加载FontAwesome
  在functions.php文件末尾粘贴这段代码，自动加载免费版FontAwesome：

  add_action( 'wp_enqueue_scripts', 'load_fontawesome' );
  function load_fontawesome() {
      wp_enqueue_style( 'fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css' );
  }
  

  保存文件即可。

• 步骤3：给Goodreads菜单项添加图标类
  进入WordPress后台→外观→菜单，找到你的社交菜单：

  1. 点击页面右上角的「屏幕选项」，勾选「CSS类」
  2. 找到Goodreads的菜单链接，在「CSS类」输入框中填入fa-brands fa-goodreads
  3. 点击「保存菜单」

• 步骤4：调整图标样式（可选）
  如果图标大小、位置不符合预期，在style.css末尾添加这段CSS，按需修改数值：

  .social-icons ul a {
    font-size: 20px; /* 调整图标大小 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  

• 步骤1：准备Goodreads图标字体文件
  从Goodreads官网下载SVG格式图标，用FontForge等工具将其转换为WebFont格式（需要包含.woff2、.woff、.ttf文件），也可以直接找现成的Goodreads WebFont资源。

• 步骤2：放置字体文件到子主题
  在子主题文件夹中新建fonts目录，将转换好的字体文件放入其中。

• 步骤3：在CSS中注册自定义字体
  在子主题style.css开头添加这段代码，注意替换成你自己的字体文件名：

  @font-face {
    font-family: 'GoodreadsIcon';
    src: url('fonts/goodreads-icon.woff2') format('woff2'),
         url('fonts/goodreads-icon.woff') format('woff'),
         url('fonts/goodreads-icon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  

• 步骤4：修改社交图标CSS规则
  找到原有社交图标CSS代码，替换为这段（将链接地址改成你的Goodreads主页地址）：

  .social-icons ul a[href*="goodreads.com/"]:after {
    font-family: 'GoodreadsIcon' !important;
    content: "\e001"; /* 替换为你字体文件中Goodreads图标的Unicode编码 */
  }
  

  Unicode编码可以通过FontForge打开字体文件查看。

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